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

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