如何用CSS实现文本垂直居中？

DY/KS免费对接

摘要：本文旨在介绍如何利用CSS实现文本垂直居中这一常见问题。通过对不同方式的阐述与对比，提供了多种可行的方法以满足不同场景需求。

图片：

一、使用line-height实现

一种常见的实现方式是通过设置line-height属性实现垂直居中。具体方法是将行高设置为与元素高度相等的值。如下代码：

.container {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container p {
  line-height: 200px;
}

这种方式的缺点是只能适用于单行文本，而且难以适应不同字体大小的文本。

二、使用display:flex实现

另一种实现方式是利用flex布局，将主轴和交叉轴分别设置为flex-start以及center，这样文本就可以垂直居中了。具体代码如下：

.container {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center; /* 设置主轴居中 */
  align-items: center; /* 设置交叉轴居中 */
}
.container p {
  font-size: 18px;
}

这种方式可以应用于多行文本，并且解决了字体大小适应问题。但是，在IE11及以下版本浏览器不支持。

三、使用position实现

第三种实现方式是利用position属性，将文本定位于高度确定的位置，然后利用transform属性将文本向上偏移一半的高度实现垂直居中。具体代码如下：

.container {
  width: 100%;
  height: 200px;
  position: relative;
}
.container p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这种方式可以兼容到IE9，并且解决了字体大小适应问题。但是，在容器高度为百分比时只能实现视觉上的位置居中，实际不居中。

四、使用table-cell实现

最后一种方式是利用table-cell布局，将文本的父级元素设置为table，文本所在元素设置为table-cell，并利用vertical-align属性实现垂直居中。具体代码如下：

.container {
  width: 100%;
  height: 200px;
  display: table;
}
.container p {
  display: table-cell;
  vertical-align: middle;
}

这种方法可以适用于多行文本，并且兼容性较好，但是不灵活，需要进行多余的html标签包装。