CSS 终于在 2024 年增加了垂直居中功能

本文翻译自 CSS finally adds vertical centering in 2024，作者：James Smith， 略有删改。

在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center进行垂直居中。

<div style="align-content: center; height: 100px;">
  <code>align-content</code> 就是这么简单！
</div>

支持情况：

Chrome: 123	Firefox: 125	Safari: 17.4

CSS 对齐一般会使用 flexbox 或 grid 布局，因为 align-content 在默认的流式布局中不起作用。在 2024 年，浏览器实现了 align-content。

• 你不需要 flexbox 或 grid，只需要 1 个 CSS 属性就可以进行对齐。
• 因此内容不需要包裹在 div 中。

<!-- 有效 -->
<div style="display: grid; align-content: center;">
  内容。
</div>

<!-- 失败！-->
<div style="display: grid; align-content: center;<