CSS中的

---

標簽是一種常用的分割線，它可以在網頁中劃分出不同的內容，使頁面更加清晰。但是默認情況下，

---

標簽是左對齊的，難以實現居中對齊的效果。下面我們介紹幾種方法，如何讓

---

居中對齊。

方法一：使用text-align屬性
hr{
width: 50%; /*或者其他值*/
margin: auto;
border: none;
border-top: 2px solid black;
text-align: center;
}

該方法是比較簡單的實現方式，通過設置text-align屬性，讓

---

居中水平對齊。需要注意的是，這種方法只能針對無需垂直居中的情況，否則會出現偏移。

方法二：使用flex布局
.container{
display: flex;
justify-content: center;
align-items: center;
}
hr{
width: 50%; /*或者其他值*/
border: none;
border-top: 2px solid black;
}

使用flex布局是比較流行的方法，該方法使用了容器元素 .container，并設置了display屬性為flex，justify-content屬性為center，align-items屬性為center。這三個屬性組合起來讓容器中的內容（也就是

---

）水平和垂直居中對齊。

方法三：使用position屬性
.container{
position: relative;
}
hr{
position: absolute;
top: 50%;
width: 50%; /*或者其他值*/
border: none;
border-top: 2px solid black;
transform: translateY(-50%);
}

這是一種使用position屬性的方法，通過設置容器元素的position屬性為relative，然后設置

---

的position屬性為absolute，并使用top屬性將它向下移動，達到垂直居中的效果。最后再使用transform: translateY(-50%)將其向上移動一半，達到完美居中的效果。