CSS 中的居中

Adam Argyle 在 web.dev 上 发布了一篇文章 深入探讨了这个问题。 他从你需要进行垂直居中和水平居中的假设出发。 传统上，垂直居中对人们来说有点棘手，尤其是在内容高度未知的情况下。

我们有 一份完整的居中指南，涵盖了各种情况，如决策树。

Adam 详细介绍了处理此问题的五种(!) 方法，甚至深入到未知垂直和水平尺寸的居中，以及一些其他限制，如语言方向和多个元素。 我想关于 CSS 中居中困难的所有愚蠢笑话都需要更新了。 也许他们应该嘲笑CSS 中有这么多很棒的居中方法。

Adam 很好地列出了所有技术的优缺点，并清楚地演示了它们。 还有一个 视频。 他选择“温柔的 Flex”作为最佳方法

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

我总能在我的样式表中找到它，因为它对宏观和微观布局都有用。 这是一个全面的可靠解决方案，其结果符合我的预期。 此外，因为我是一个内在大小的狂热爱好者，所以我倾向于采用这种解决方案。 诚然，输入很多内容，但它带来的好处超过了额外的代码。

请记住，当你在“CSS 中居中”时，它并不总是处于这些极端情况。 让我们再看一个情况，只是为了好玩。 假设你需要水平居中一些inline-*¹ 元素……text-align: center; 可以用一行代码实现

但是，如果你需要居中这些项目的父元素呢？ 你可能会认为你可以使用经典的margin: 0 auto; 方法，而且你可以，但父元素很可能是块级元素，因此要么是全宽，要么具有固定宽度。 假设你希望它与它包含的内容一样宽。 你可以使父元素inline-*，但是然后你需要另一个父元素来设置text-align 以使其居中。

Stefan Judis 最近 谈到了这一点。 诀窍是保持元素为块级，但使用width: fit-content;

老式的温柔 Flex 也许可以在这里发挥作用，但我们又需要一个额外的父元素。 总是需要考虑的事情。

直接链接 →