水平線垂直CSS是指將一條水平線垂直于頁面的方式，這種方式在設(shè)計網(wǎng)站時非常常見。CSS中提供了幾種不同的方式來實現(xiàn)水平線垂直。

/* 第一種方式 */
.div1 {
display: flex;
justify-content: center;
align-items: center;
}
.div1 hr {
width: 100%;
height: 1px;
background-color: black;
}
/* 第二種方式 */
.div2 {
position: relative;
}
.div2 hr {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 1px;
background-color: black;
}
/* 第三種方式 */
.div3 {
position: relative;
}
.div3:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: black;
z-index: -1;
}
.div3 h2 {
position: relative;
z-index: 1;
text-align: center;
}

第一種方式使用了flexbox布局，將水平線和文字放置于同一個div內(nèi)部，通過設(shè)置display為flex并使用justify-content和align-items屬性實現(xiàn)垂直水平居中的效果。

第二種方式使用了絕對定位，通過設(shè)置hr的top為50%，然后使用translateY將其提升到垂直居中的位置。

第三種方式同樣使用了絕對定位，不過是在div元素之前添加一個偽元素，將偽元素設(shè)置為水平線，并且使用z-index將文字內(nèi)容層級提高，從而實現(xiàn)了可讀性更好的效果。