文本对齐中心不垂直对齐介绍

在编写排版时，文字对齐是一个非常重要的问题，存在垂直对齐和水平对齐两个问题。其中，水平对齐主要分为左对齐、右对齐、居中对齐三种方式。但是，在使用水平居中对齐时，文本对齐的中心可能不是垂直对齐的，这就是本文要讲解的内容。

原因

当我们使用水平居中对齐时，文本的中心位于当前元素的中间位置。如下图所示，设置的宽度为300px，文本的长度不足300px，居中对齐可以看到，当文本长度为偶数时，居中时，文本的中心是对齐的。但是当文本长度为奇数时，中心线就会偏离垂直方向。

此时如果需要实现中心垂直对齐，需要根据不同情况进行处理。

解决方案

方案一：使用flex布局实现中心垂直对齐

使用flex布局可以很容易实现中心垂直对齐，如下所示的代码：

<div class="container">
  <div class="text">center</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: lightgray;
}

通过给父元素添加display:flex，并分别设置justify-content:center和align-items:center即可实现中心垂直对齐。值得注意的一点是，当text-align:center时，行高line-height需要和元素高度相等，否则会导致行高与元素高度不一致。

方案二：使用绝对定位实现中心垂直对齐

在元素的宽度已知的情况下，可以使用绝对定位实现中心垂直对齐，如下所示的代码：

<div class="container">
  <div class="text">center</div>
</div>

.container {
  position: relative;
  width: 150px;
  height: 100px;
  background-color: lightgray;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

首先，父元素需要设置position:relative;width:150px;height:100px，子元素设置为position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)，即可实现中心垂直对齐。

总结

以上两种方式都可以很好的解决文本对齐中心不垂直对齐的问题，选择哪一种方式可以根据实际需求选择。