如何在 CSS 中居中文本

在 Web 开发中，我们经常需要将文本居中对齐。这篇文章将会介绍 CSS 中几种常见的方式来实现文本的居中对齐效果。

水平居中

text-align 属性

可以使用 text-align 属性来将文本水平居中。这个属性可以用于块级元素和一些表单控制元素。在父元素中设置 text-align:center 会将子元素居中对齐。

.parent {
  text-align: center;
}

<div class="parent">
  <p>这段文字将会水平居中</p>
</div>

margin 属性

还可以使用 margin 属性来实现文本的水平居中。将左右 margin 设为 auto，会使元素在父容器中水平居中。

.child {
  margin: 0 auto;
}

<div class="parent">
  <p class="child">这段文字将会水平居中</p>
</div>

垂直居中

line-height 属性

使用 line-height 属性可以使文本在垂直方向上居中。将文本所在的行高设为父元素高度的值，就可以使文本垂直居中对齐。

.parent {
  height: 100px;
  line-height: 100px;
}

<div class="parent">
  <p>这段文字将会垂直居中</p>
</div>

display:flex 属性

使用 CSS3 的 display:flex 属性可以将子元素垂直居中。将父元素设为 display:flex，再配合 align-items:center 属性即可实现子元素垂直居中。

.parent {
  display: flex;
  align-items: center;
}

<div class="parent">
  <p>这段文字将会垂直居中</p>
</div>

水平垂直居中

position 属性

使用 position 属性和 transform 属性可以实现文本的水平垂直居中。将元素设为绝对定位 position:absolute，再将左、上、右、下定位设为 0，最后使用 transform 属性将元素向中心点移动即可实现居中对齐。

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

<div class="parent">
  <p class="child">这段文字将会水平垂直居中</p>
</div>

display:flex 属性

使用 CSS3 的 display:flex 属性可以将子元素水平垂直居中。将父元素设为 display:flex，再配合 justify-content:center 和 align-items:center 属性即可实现子元素水平垂直居中。

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

<div class="parent">
  <p>这段文字将会水平垂直居中</p>
</div>

以上就是 CSS 中常见的文本居中对齐方式，可以根据实际需求来选择合适的方法来实现文本的对齐效果。