CSS 文本居中对齐

在网页设计中，文本居中对齐是一项重要的任务。CSS提供了多种方式来实现文本居中对齐，下面介绍其中两种。

水平居中对齐

要实现文本水平居中对齐，可以使用 text-align 属性。该属性可以设置为以下值：

• left 左对齐
• right 右对齐
• center 居中对齐
• justify 两端对齐

例如，以下代码将文本水平居中对齐：

text-align: center;

垂直居中对齐

要实现文本垂直居中对齐，可以使用 line-height 和 height 属性。首先，需要将包含文本的父元素设置为相对定位：

position: relative;

然后，将子元素的高度设置为和父元素一样，并将 line-height 设置为和子元素高度一样：

height: 50px;
line-height: 50px;

接着，将子元素的 position 属性设置为绝对定位，并使用 top 和 left 属性将其居中对齐：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

这里使用 transform 属性将子元素向左上方移动一半的高度和宽度，实现了垂直居中对齐。

总结

CSS 提供了多种方式实现文本居中对齐，其中包括水平居中对齐和垂直居中对齐。程序员可以根据实际需求选择合适的方式来实现设计。