[分享]css中怎么使文字高度居中显示

CSS 中怎么使文字高度居中显示在网页排版中，有时候需要让文字垂直居中显示，以使整个页面更加美观对称。下面介绍两种方法来让 CSS 中的文字垂直居中显示。方法一：使用行高行高（lineheight）是...

CSS 中怎么使文字高度居中显示
在网页排版中，有时候需要让文字垂直居中显示，以使整个页面更加美观对称。下面介绍两种方法来让 CSS 中的文字垂直居中显示。
方法一：使用行高
行高（line-height）是指一行文字的高度。将行高设置为文本容器的高度，文本就会居中显示。
例如，假设你有一个 p 标签，想让其中的文字垂直居中显示，可以使用以下 CSS 代码：
p {
height: 100px; /* 文本容器高度 */
line-height: 100px; /* 行高等于文本容器高度 */
}
上述代码将行高设置为文本容器的高度，因此文本会垂直居中显示。如果修改文本容器高度，只需要将行高和容器高度的数值改成相同就可以了。
方法二：使用 flex 布局
Flex 布局是一种强大的 CSS 布局方式，其中有一个属性 align-items 可以用来控制元素在交叉轴上的对齐方式。将交叉轴设置为垂直方向上的居中对齐，就可以让文本垂直居中显示。
例如，假设你有一个 div 容器，里面包含一个 p 标签，想让其中的文字垂直居中显示，可以使用以下 CSS 代码：
div {
display: flex; /* 启用 Flex 布局 */
align-items: center; /* 垂直居中对齐 */
height: 100px; /* 容器高度 */
}
p {
margin: 0; /* 去掉默认外边距 */
}
上述代码将 div 容器设置为 Flex 布局，使用 align-items 属性将元素在交叉轴上垂直居中对齐。文本就可以垂直居中显示。如果修改容器高度，只需要修改容器高度的数值就可以了。
总结
高度居中对于网页排版来说很重要，可以让页面更美观、对称。CSS 提供了不少方法来实现文本垂直居中，本文介绍了两种方法：使用行高和使用 Flex 布局。读者可以根据自己的需求和喜好选择合适的方法。