CSS文本水平上下居中是Web前端開發中常用的技巧之一，通常用于實現頁面元素的美觀布局。下面我們將詳細講解如何實現文本的上下居中效果。
在CSS中，實現文本水平居中有多種方法，以下是兩種常用的方法：
方法一：使用display和text-align屬性。
CSS代碼：
.pre {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 300px;
}
在這段代碼中，我們使用了flex布局，將當前元素的水平和垂直方向都設置為居中，并將文本的對齊方式設置為居中。height屬性可以根據需求自行設置。
方法二：使用line-height屬性。
CSS代碼：
.pre {
background-color: #f5f5f5;
height: 150px;
line-height: 150px;
text-align: center;
}
在這段代碼中，我們使用了line-height屬性，將行高設置為與元素高度相等，這樣文本就能夠垂直居中。text-align屬性與方法一相同，使文本水平居中。
總結：
以上兩種方法都能夠實現文本的水平居中和垂直居中，具體使用哪種方法需要根據實際情況決定。如果需要同時實現多個元素的布局，建議使用第一種方法，它更加靈活，并且可以適應不同屏幕大小的需求。
參考代碼：

<p class="pre">這里是居中的文本。</p>