CSS 垂直居中是Web設計中一個重要的技巧，它可以讓網站元素在頁面中更好的顯示和布局。本文將介紹CSS實現橫線垂直居中的方法。

/* HTML 代碼 */
<div class="container">
<div class="line"></div>
</div>
/* CSS 代碼 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
.line {
width: 50%;
height: 1px;
background-color: black;
}

以上代碼會在一個父級容器內創建一個黑色的橫線，并使其在垂直方向上居中。具體實現方式是通過使用flexbox模型，設置父級容器的display屬性為flex，并用justify-content和align-items屬性來分別設置子元素的水平居中和垂直居中。

由于想要實現垂直居中效果，需要設置父級容器的高度，以便讓子元素相對于父級容器垂直居中。

總之，使用CSS實現橫線的垂直居中效果可以使網站的布局更加美觀，讓網站元素更加易于閱讀和使用。希望這篇文章對你有所幫助。