CSS 是前端開發中常用的樣式表語言，能夠讓我們的頁面有更好的視覺效果和交互性。其中，讓文字上下居中是使用 CSS 進行排版布局的一個重要技巧，下面我們來詳細了解一下。 首先，我們需要了解兩個概念：行高和行距。行高是指行框盒子的高度，而行距是指行框盒子之間的距離。當一個行框盒子內容高度小于行高時，其余部分會自動填充上下間距，實現文字的垂直居中。 要實現文字上下居中，可以通過以下幾種方法： 1. 使用 line-height 屬性 line-height 屬性用來設置行高，將其設置為與容器高度相等，則文字會上下居中。例如：

<style>
p {
height: 100px;
line-height: 100px;
}
</style>
<p>文字上下居中</p>

2. 使用 flex 布局 flex 布局是 CSS3 提供的一種彈性布局模式，能方便地實現文字的垂直居中。例如：

<style>
div {
height: 100px;
display: flex;
align-items:center;
}
</style>
<div>文字上下居中</div>

3. 使用 padding 填充 padding 屬性是盒模型的一部分，用于設置內邊距。可以通過設置上下內邊距的值來實現文字的垂直居中。例如：

<style>
p {
height: 100px;
padding-top: 40px;
padding-bottom: 40px;
}
</style>
<p>文字上下居中</p>

以上幾種方法適用于不同的場景和需求，可以根據具體情況選擇合適的實現方法。掌握了這些技巧，相信能更好地應對頁面排版布局中的各種挑戰，讓頁面效果更加美觀和實用。