在網頁設計中，下劃線是一種常見的修飾樣式。使用 CSS 可以輕松地實現下劃線的添加，但是很多人在居中下劃線時遇到了困難。本文將介紹一些方法，幫助您實現下劃線的居中顯示。

.text {
text-align: center;
border-bottom: 1px solid #000;   
display: inline-block;
padding-bottom: 3px; 
}

代碼中的.text類被設置為內聯塊級元素，并且添加了 1 像素的下邊框。然后，通過對元素設置邊框底部的內邊距來設置下劃線距離容器底部的距離。最后，將文本對齊方式設置為居中。

使用以上代碼，您可以輕松地實現下劃線的居中顯示。但是如果您需要對下劃線的樣式進行自定義，添加樣式即可：

.text {
text-align: center;
display: inline-block;
}
.text:after {
content: '';
display: block;
margin: 0 auto;
width: 50%;
height: 1px;
background-color: #000;
}

在這個例子中，我們使用偽元素 :after，并設置為塊級元素。我們將該元素居中，并設置其寬度為容器的 50%。然后，添加一個 1 像素高的背景色，以實現下劃線的效果。

總的來說，使用 CSS 來居中下劃線并不難。您只需要使用一些簡單的代碼，便可實現下劃線的居中，樣式的定制及調整也非常容易。