如何使用 CSS 垂直对齐任何内容

无论您是经验丰富的 Web 开发人员，还是网站创建新手，您可能都以为自己知道如何垂直对齐……但只是一瞬间。不过别担心，我们每个人都会遇到这种情况。

以下是我最喜欢的三种在 CSS 中垂直对齐内容的方法。

转换

如果你从事 Web 开发已有一段时间，你肯定对这种方法很熟悉。在 Flexbox 或 CSS 网格出现之前，这是在 CSS 中唯一可靠的垂直对齐方法。不过别被它迷惑了，我现在还在用它。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

如果您发现使用此方法时元素变得模糊，因为它们被放置在半个像素上，请尝试以下操作：

 .parent {
    position: relative;
 }
 .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: perspective(1px) translate(-50%, -50%);
 }

弹性盒子

要使用 flexbox 将对象居中，您只需要两个居中属性：

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

CSS网格

这是一个非常简单的居中方法。它将使该元素的直接子元素居中。如果该元素中有五个子元素，并且每个子元素都有两个子元素，则它只会使这五个子元素居中（而不是嵌套在其中的两个子元素）。

.element {
   display: grid;
   place-items: center;
   height: 100vh; // or however tall you want your box to be
 }

仅对齐一行文本？

如果你只是想让某个元素内的文本垂直对齐，那就简单多了。你只需要让文本的行高与它所在容器的行高相同即可。

例如，如果文本位于按钮内，按钮高度为 32px，则只需将文本的行高设置为 32px，文本就会垂直居中。

.button {
    height: 32px;
 } 
 .text {
   line-height: 32px;
 }

希望以上内容能帮到你在 CSS 中实现居中。你最终选择了哪种方法？欢迎留言告诉我。

鏂囩珷鏉ユ簮锛�https://dev.to/flores8/how-to-vertically-align-anything-with-css-i78