如何使用 CSS 使文本垂直居中

如何使用 CSS 使文本垂直居中

如果你在div中包含一些文本，而没有其他内容，那么div的高度将与文本的高度相匹配。但是，假设你有一些文本和一张图片，文本将在div的底部对齐，这通常不是你想要的。在本文中，你将学习几种将文字在div或其他元素中垂直居中的方法。

如何使用 Line Height 使文本居中

这种方法有一定的局限性，但如果你使用height属性将元素设置为固定高度，这种方法还是很有用的。

line-height属性决定浏览器渲染文本时方框的高度。默认情况下，该值被设置为略大于1，以实现合适的文本行间距。

如果将元素的height和line-height设置为相同值，文本将垂直居中：

.my-element {
  height: 3rem;
  line-height: 3rem;
}

使用line-height垂直居中文本

不过，使用这种方法有一个重要的注意事项。只有当文本可以在一行中显示时，这种方法才有效。

如果文本确实换行了，你会看到第一行垂直居中。因为你设置的line-height与元素的height相同，所以换行的文本行现在会溢出元素。

换行的文本溢出容器

如果这听起来太死板，请继续往下看。接下来，你将看到如何使用 Flexbox 将文本和元素内的其他内容垂直居中。

如何使用 Flexbox 将文本居中

更好、更通用的解决方案是使用 flexbox 布局，并将对齐项设置为居中。

使用 Flexbox（flex 容器）的元素可以按行或列布局元素（flex 项）。Flexbox 布局有两条假想线贯穿其中。第一条是主轴，项目将沿着它放置。对于 flexbox row，主轴是水平轴。

横轴垂直于主轴。你可以使用横轴来定义 flex 容器内元素的垂直对齐方式。

水平 flexbox 布局中的主轴和横轴

以下是应用 flexbox 布局并将文本垂直居中所需的 CSS：

.my-element {
    /* Use a flexbox layout */
    display: flex;
    /* Make a horizontal flexbox (the default) */
    flex-direction: row;
    /* The important part: vertically center the items */
    align-items: center;
}

这将创建一个水平的 flexbox 布局（flex-direction: row并非严格要求，因为它是默认设置）。

align-items属性决定了项目沿横轴或纵轴的对齐方式。有几种不同的值可以使用，这里可以使用center将文本垂直居中。

使用 align-items: center对齐文本

这样做效果很好，甚至可以处理多行文本。如果元素内有其他内容，如图片，所有内容都将垂直对齐。

文本与其他内容垂直对齐

如何使用 CSS Grid 使文本居中

你也可以使用 CSS grid 将内容垂直居中。

对于包含要居中的文本的单个div，你可以将其转化为一行一列的网格布局。

.my-element {
    display: grid;
    align-items: center;
}

在网格布局中，align-items属性指定了单元格内内容沿列（垂直）轴的对齐方式。这将垂直对齐div元素中的文本。

使用 1x1 网格布局使文本垂直居中

如果包含文本的元素已经是网格布局的一部分，可以将align-items: center应用于整个网格，或者如果只想控制一个网格单元格的垂直对齐方式，可以使用align-self: center。

总结

现在你知道如何将文本垂直居中了吧。下次再看到关于将div居中的推文时，你就可以用新学到的 CSS 知识回复了！