在網頁設計中，CSS是我們經常使用的樣式表語言。其中一個常見的需求就是在文字中間加上豎線，讓頁面看起來更加美觀。下面我們來介紹如何使用CSS實現這個效果。

p {
text-align: center;
position: relative;
}
p::before {
content: "";
position: absolute;
top: 50%;
left: 0;
bottom: 0;
width: 1px;
height: 10px;
margin: -5px 0 0 0;
background-color: #000;
}

首先，我們需要將文字居中，使用text-align屬性即可實現。接著，我們使用偽元素::before來添加豎線。我們將豎線放置在文字的左邊，使得它們能夠在同一行顯示。

由于我們需要讓豎線在文字的中間，所以我們需要將豎線的位置調整到文字的中心。我們可以使用position屬性來定位。將豎線的top屬性設置為50%，就可以將豎線放置在文字的中心。

接下來，我們設置豎線的樣式。我們將豎線的高度設置為10像素，寬度設置為1像素。對于豎線的顏色，我們使用了黑色。當然，你可以根據你的需求來自定義樣式。

最后，我們需要使用margin屬性來將豎線的位置微調一下，確保它們能夠完美地與文字貼合。我們將豎線的margin-top屬性設置為它高度的一半（即-5px）。這樣，我們就成功地使用CSS實現了在文字中間加豎線的效果。