如何设置 CSS 文字居中

在网页设计中，文字居中是一项常见需求。它不仅能提升页面的美观度，还能增强用户的阅读体验。下面就来详细探讨一下如何通过 CSS 设置文字居中。

对于行内元素，比如 <span> 标签内的文字，若要实现水平居中，可将其父元素的 text-align 属性设置为 center。例如：

.parent {
    text-align: center;
}

在上述代码中，.parent 是包含行内元素的父元素类名。只要应用了该样式，父元素内的行内文字就会水平居中显示。

而对于块级元素中的文字，水平居中也可以使用 text-align: center，但前提是该块级元素宽度固定。若要实现垂直居中，情况会稍微复杂一些。对于高度固定的块级元素，可以利用 line-height 属性。将 line-height 的值设置为与元素高度相同，文字就能在垂直方向上居中。示例代码如下：

.block {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

上述代码中的 .block 类的元素高度为 100px，line-height 也为 100px，这样文字就会在垂直和水平方向都居中。

如果是不定高的块级元素，实现垂直居中就需要借助 CSS 弹性布局（Flexbox）或网格布局（Grid）。使用 Flexbox 时，先将父元素的 display 属性设置为 flex 或 inline-flex，然后通过 justify-content: center 实现水平居中，align-items: center 实现垂直居中。代码示例：

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

对于网格布局，将父元素 display 设置为 grid 或 inline-grid，再利用 place-items: center 这一便捷属性，它能同时实现水平和垂直方向的居中。代码如下：

.grid-parent {
    display: grid;
    place-items: center;
}

掌握这些 CSS 文字居中的方法，能让我们在网页设计中更加灵活地处理文字排版，打造出更具吸引力的页面布局。无论是简单的页面还是复杂的项目，这些技巧都能发挥重要作用，帮助我们实现理想的视觉效果。