迹忆客 专注技术分享

本文将介绍在 CSS 中垂直居中文本的方法。

在 CSS 中使用 line-height 属性垂直居中文本

我们可以将 line-height 属性的高度设置为 div 以在 CSS 中垂直居中文本。line-height 属性指定线的高度。可以通过创建 div 元素的边框来说明。我们还可以使用 text-align 属性并将其设置为 center 以将文本水平居中对齐。

例如，在 HTML 中创建一个 div 并写入文本 Hello World!之间。接下来，在 CSS 中，将 div 的高度设置为 200px。此外，将 line-height 设置为相同的值。使用 text-align 属性将文本与 center 对齐。使用 border 简写属性创建一个 3px 宽度的 black 颜色的 solid 边框。

在下面的示例中，我们为 div 的 line-height 和 height 设置了相同的像素。因此，它垂直居中文本。但是，此方法仅适用于单行文本。

示例代码：

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

在 CSS 中使用 display、vertical-align 和 line-height 属性垂直居中文本

我们可以使用 display、vertical-align 和 line-height 等不同的 CSS 属性将文本居中显示在多行中。display 属性设置元素的显示行为。vertical-align 属性负责元素的垂直对齐。我们可以将 display 设置为 inline-block，将 vertical-align 设置为 middle 来实现多行文本的垂直对齐。

例如，在 HTML 中创建一个 div 并在其中写入 span。写下文本 Hello 并用 <br> 换行，然后写下 World!在 span 内。接下来，在 CSS 中，将 line-height 和 height 设置为与 200px 相同的值，选择 div。像我们在第一种方法中所做的那样，为 div 设置一个边框并使文本居中对齐。然后，选择 span 并将 display 属性设置为 inline-block。然后，将 middle 的值赋予 vertical-align 属性。最后，将 line-height 的值设置为 normal。

在下面的示例中，我们将 span 中的 line-height 属性更改为 normal，以使多行文本具有正常的 line-height。inline-block 值将在上一行的正下方开始文本的下一行。vertical-align 属性的 middle 值会将文本放置在垂直轴的中间。

示例代码：

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

模拟表格显示使 CSS 中的文本垂直居中

我们可以将文本模拟为表格单元格，使其在 CSS 中垂直居中。我们使用 display 属性来模拟表格。我们还将使用 vertical-align 属性使文本垂直居中。我们将处理第二种方法的 HTML 片段，并对其应用新的 CSS。

首先，选择 div 并设置高度、宽度和边框。使用 display 属性并将值设置为 table。它会使 div 表现得像一张表。然后，选择 span 并将 display 属性设置为 table-cell，将 vertical-align 属性设置为 middle。将 span 元素设置为 table-cell 将使该元素类似于表格单元格。这样，我们就可以创建一个垂直居中的文本。

示例代码：

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}