在網站設計中，我們經常需要將文本垂直居中，這時候就需要使用 CSS 線框模型的屬性來實現。在這篇文章中，我們將介紹常見的上下居中方式和具體實現方法，讓你可以輕松實現文本的上下居中效果。 使用 CSS 居中文本的方式： 1. 行高居中 設置行高和文字大小相等即可：

p {
font-size: 40px;
line-height: 40px;
}

2. flex 居中 使用 flex 布局可以輕松實現文本的垂直居中：

.container {
display: flex;
align-items: center;
}

3. position 居中 使用定位加上 transform 可以實現垂直居中：

.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

4. table 居中 使用 table 布局很方便地實現了居中：

.table {
display: table-cell;
vertical-align: middle;
}

通過上述四種方式實現了文本的上下居中效果。在實際開發中需要根據實際情況來選擇相應的方法進行使用。希望這篇文章能幫助你更好地實現文本的居中效果。