CSS 中如何實現文字的上下居中呢？這是一個很常見的問題，下面我會為大家介紹一些方法。
首先，我們需要了解一些基本概念。CSS 中的盒模型是指每個 HTML 元素都可以看作是一個盒子，包括內容、內邊距、邊框和外邊距。對于一個塊級元素來說，它的默認表現方式是從上到下排列，但是這個元素的高度是由其內部的內容高度來決定的。
那么如何讓文字在這個盒子中上下居中呢？以下是一些方法：
1. 行高法
將行高設置為與盒子高度相同，這樣文字就會自動居中了。代碼如下：
pre {
display: inline-block;
height: 100px;
line-height: 100px;
}
2. 絕對定位法
使用絕對定位來實現。具體方法是將文字所在的元素設置為 position: relative，然后將文字設置為 position: absolute，再設置 top 和 bottom 的值為 0。代碼如下：
pre {
display: inline-block;
height: 100px;
position: relative;
}
pre span {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
3. 彈性盒子法
使用 flex 布局來實現。將父元素的 display 屬性設置為 flex，然后將子元素的 align-items 和 justify-content 屬性都設置為 center。代碼如下：
pre {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
以上就是幾種常見的方法。需要注意的是，不同的方法適用于不同的場景，具體使用要根據實際情況來確定。