文本垂直居中，分為“單行”與“多行”文本兩種情況，多行又分為“固定”與“不固定”高度兩種情況，看下圖效果。

文本垂直居中

height 搭配 line-height 僅可實現單行文本垂直居中，不可用于多行文本。

适用：單行文本

.text1 { width: 200px; height: 100px; line-height: 100px; background: rgb(0, 151, 246); color: #fff; text-align: center; }

如果元素高度不固定，可采用 padding-top 與 padding-bottom 同值以實現垂直居中。

适用：單行與多行文本。

.text2 { padding: 20px; width: 200px; background: rgb(0, 151, 246); color: #fff; }

display: table-cell 與 vertical-align: middle 搭配。

适用：單行與多行文本。

注意：此種情況 margin 不起作用，因為 margin 對 display: table* 情況是無效的。

.text3 { width: 200px; height: 100px; background: rgb(0, 151, 246); color: #fff; text-align: center; display: table-cell; vertical-align: middle; border: 1px solid #000; }

利用 flex 布局搭配 align-items: center

适用：單行與多行文本。

注意：flex 需要兼容寫法。

.text4 { display: flex; justify-content: center; align-items: center; margin-top: 20px; padding: 0 20px; width: 200px; height: 100px; background: rgb(0, 151, 246); color: #fff; }

利用 grid 布局（grid or inline-grid）搭配 align-items: center。

适用：單行與多行文本。

注意：除了 IE，其他大部分浏覽器均已支持。

.text5 { display: grid; align-items: center; padding: 0 20px; width: 200px; height: 100px; background: rgb(0, 151, 246); color: #fff; }

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!