文本的水平居中对齐方式（文本垂直居中）

文本垂直居中，分为“单行”与“多行”文本两种情况，多行又分为“固定”与“不固定”高度两种情况，看下图效果。

文本垂直居中

1. line-height

height 搭配 line-height 仅可实现单行文本垂直居中，不可用于多行文本。

适用：单行文本

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

2. padding

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

适用：单行与多行文本。

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

3. table-cell

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; }

4. flex

利用 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; }

5. grid

利用 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; }

,