CSS 如何实现文字居中

在网页设计中，文字居中是一个常见需求。CSS 提供了多种方式来实现文字在不同场景下的居中显示，掌握这些方法能让页面布局更加美观和吸引人。

对于行内元素，比如 <span> 标签内的文字，实现水平居中相对简单。可以通过设置父元素的 text-align: center 样式来达成。例如：

.parent {
    text-align: center;
}

这里的 .parent 是包含行内元素的父元素类名。这种方式只对行内元素起作用，对于块级元素则无效。

当要使块级元素（如 <div>）中的文字水平居中时，同样可以在该块级元素上应用 text-align: center。如果希望块级元素自身在父容器中水平居中，可设置其 margin: 0 auto。例如：

.child {
    width: 200px;
    margin: 0 auto;
}

这里 .child 宽度固定为 200px，通过 margin: 0 auto 让它在父容器中水平居中。

实现文字垂直居中稍微复杂一些。对于单行文本，可将元素的 line-height 设置为与元素高度相同的值。例如：

.single-line {
    height: 50px;
    line-height: 50px;
}

此时，.single-line 元素内的单行文字就会在垂直方向上居中。

对于多行文本的垂直居中，有几种方法。一种是使用 display: flex 布局。将父元素设置为 display: flex，然后使用 align-items: center 和 justify-content: center 分别实现垂直和水平居中。例如：

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

另外，display: table-cell 也能实现多行文本垂直居中。将父元素设置为 display: table-cell，再配合 vertical-align: middle 和 text-align: center 来实现垂直和水平方向的居中。例如：

.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

通过这些 CSS 方法，无论是水平居中还是垂直居中，都能轻松实现。开发者可以根据具体的页面布局需求，灵活选择合适的方式，打造出更具视觉吸引力的网页。