css文本垂直居中详解

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

文本垂直居中

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