CSS选择文本对齐中心

在CSS中, 文本对齐(center)是指将文本水平及垂直居中对齐。这种对齐方式可以通过text-align和line-height 属性来实现。

然而，在某些情况下, 我们想要将文本垂直居中，在文本块中不使用line-height属性，我们需要使用transform属性的translate()函数来实现这个效果。

使用transform属性的translate()函数

使用translate()函数, 我们可以在水平和垂直方向上移动文本块的位置。 例如, 如果我们想将文本块垂直居中, 我们可以将translateY()函数的值设置为50％。 值50％表示在垂直方向上将文本块向下移动50％。

这里是一个示例：

.container {
  position: relative;
}

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

定义一个类

我们可以定义一个CSS类，该类使用上面提到的属性来将任何文本块垂直居中。 这里是一个CSS类的例子：

.vertical-center {
  position: relative; /* 确保相对定位 */
  top: 50%; /* 将元素向下移动50% */
  transform: translateY(-50%); /* 将元素往上移回50% */
}

现在我们可以将此类应用于任何文本块中，并将其垂直居中。

结论

借助transform属性的translate()函数，我们可以很容易地在文本块中实现垂直居中。 需要注意的是, 只有在相对定位(relative position)下转换操作才是有效的。

要将文本块完全居中, 我们依然需要设置文本块的宽度和高度，以及使用margin：0 auto;将其水平居中。 但是，这篇文章主要介绍了如何在垂直方向上居中文本。