如何在 CSS 中居中显示文字

在网页设计中经常需要将文字居中显示，这篇介绍将通过 CSS 实现文字的水平居中和垂直居中。

文字的水平居中

行内元素

对于行内元素，可以使用 text-align 属性将文字水平居中。

<div style="text-align: center;">
  <span>居中的文字</span>
</div>

块级元素

对于块级元素，可以使用 margin 属性，将其设置为左右自动，实现文字水平居中。

<div style="margin: 0 auto;">
  <p>居中的文字</p>
</div>

文字的垂直居中

在没有设置元素的高度的情况下，无法通过 margin 属性实现垂直居中，可以尝试以下两种方法。

1. 使用 flexbox 布局

使用 flexbox 布局能够很方便地实现垂直居中。

<div style="display: flex; justify-content: center; align-items: center;">
  <p>居中的文字</p>
</div>

2. 使用 table 布局

使用 table 布局能够实现兼容性更好的垂直居中。

<div style="display: table; height: 200px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">
    <p>居中的文字</p>
  </div>
</div>

结语

通过上述方法，我们可以灵活地居中显示文字。但需要注意的是，这些方法都要考虑浏览器的兼容性，最好在项目中具体测试后再使用。