如何在 CSS 中居中文本

在 CSS 中居中文本可以使用多种方法，本文将介绍其中比较常见的几种方法。

居中单行文本

1. text-align

可以使用 text-align 属性设置单行文本的水平对齐方式。将文本所在的块级元素（如 div）的 text-align 属性设置为 center 就可以让文本水平居中。

div {
  text-align: center;
}

2. line-height

可以使用 line-height 属性设置单行文本的垂直对齐方式。将文本所在的块级元素（如 div）的 height 属性设置为文本所在行高度的值，再将 line-height 属性设置为该值即可让单行文本垂直居中。

div {
  height: 30px; /* 文本所在行的高度 */
  line-height: 30px;
}

3. display + text-align

可以将文本所在的块级元素设置为 display: flex，然后使用 justify-content 和 align-items 属性来设置文本水平和垂直居中。

div {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

居中多行文本

1. display + text-align

可以将文本所在的块级元素设置为 display: flex，然后使用 justify-content 和 align-items 属性来设置文本水平和垂直居中。需要注意的是，在多行文本的情况下， text-align 属性对水平居中无效。

div {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 子元素竖向排列 */
}

2. transform

可以应用 transform 属性来使多行文本水平、垂直居中。

div {
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 向左上方偏移50% */
}

3. table-cell

可以将文本所在的块级元素设置为 display: table，将其内部元素设置为 display: table-cell，然后将其 vertical-align 属性设置为 middle。

div {
  display: table;
}

p {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 水平居中 */
}

总结

以上就是 CSS 中居中文本的几种方法。需要注意的是，不同的方法适用的场景不同，根据具体情况选择最适合的方法才能取得更好的效果。