> 本文翻译自 [CSS finally adds vertical centering in 2024](https://build-your-own.org/blog/20240813_css_vertical_center/)，作者：James Smith，略有删改。在 2024 年的 CSS 原生属性中允许使用 **1 个 CSS 属性** `align-content: center`进行垂直居中。 ```html

align-content 就是这么简单！

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b349fc30eded4684833a3510880b19af~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Y2X5Z-ORkU=:q75.awebp?rk3s=f64ab15b&x-expires=1761166515&x-signature=dglItw6TcvrRsoEpHFwKgzZgVPM%3D) 支持情况： | Chrome: 123 | Firefox: 125 | Safari: 17.4 | | ----------- | ------------ | ------------ | CSS 对齐一般会使用 `flexbox` 或 `grid` 布局，因为 `align-content` 在默认的流式布局中不起作用。在 2024 年，浏览器实现了 `align-content`。 * 你不需要 flexbox 或 grid，只需要 1 个 CSS 属性就可以进行对齐。 * 因此内容不需要包裹在 div 中。 ```html

内容。

``` ```html

包含多个节点的内容。

``` ```html

包含多个节点的内容。

``` ```html

包含多个节点的内容。

``` 令人惊讶的是，经过几十年的发展，CSS 终于有了 **一个属性** 来控制垂直对齐！ ## 垂直居中的历史浏览器很有趣，像对齐这样的基本需求长期以来都没有简单的答案。以下是在浏览器中垂直居中的方法（水平居中是另一个话题）： ### 方法 1: 表格单元格星级：★★★☆☆ 有 4 种主要布局：流（默认）、表格、flexbox、grid。如何对齐取决于容器的布局。Flexbox 和 grid 相对较晚添加，所以表格是第一种方式。 ```html

内容。

``` ### 方法 2: 绝对定位星级：☆☆☆☆☆ 通过绝对定位间接的方式来实现这个效果。 ```html

内容。

``` 这个方式通过绝对定位来绕过流式布局： * 用 `position: relative` 标记参考容器。 * 用 `position: absolute; top: 50%` 将内容的边缘放置在中心。 * 用 `transform: translateY(-50%)` 将内容中心偏移到边缘。 ### 方法 3: 内联内容星级：☆☆☆☆☆ 虽然流布局对内容对齐没有帮助。它允许在一行内进行垂直对齐。那么为什么不使一行和容器一样高呢？ ```html

::before

内容。

``` ```css .container::before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .content { display: inline-block; vertical-align: middle; } ``` 这个方式有一个缺陷，需要额外创建一个伪元素。 ### 方法 4: 单行 flexbox 星级：★★★☆☆ 现在布局中的 Flexbox 变得广泛可用。它有两种模式：单行和多行。在单行模式（默认）中，行填充垂直空间，`align-items` 对齐行内的内容。 ```html

内容。

``` 或者调整行为列，并用 `justify-content` 对齐内容。 ```html

内容。

``` ### 方法 5: 多行 flexbox 星级：★★★☆☆ 在多行 flexbox 中，行不再填充垂直空间，所以行（只有一个项目）可以用 `align-content` 对齐。 ```

内容。

``` ### 方法 6: grid 星级：★★★★☆ Grid 出来的更晚，对齐变得更简单。 ```

内容。

``` ### 方法 7: grid 单元格星级：★★★★☆ 注意与前一个方法的微妙区别： * `align-content` 将单元格居中到容器。 * `align-items` 将内容居中到单元格，同时单元格拉伸以适应容器。 ```

内容。

``` 似乎有很多方法可以做同一件事。 ### 方法 8: margin:auto 星级：★★★☆☆ 在流布局中，`margin:auto` 可以水平居中，但不是垂直居中。使用 `margin-block: auto` 可以设置垂直居中。 ```

内容。

``` ### 方法 9: 这篇文章的开头星级：★★★★★ 为什么浏览器最初没有添加这个？ ```

align-content 就是这么简单！

``` ## 总结 CSS 的新特性 `align-content` 提供了一个简单且直接的方式来实现垂直居中，无需使用额外的div包装或复杂的布局模式即可完成垂直居中。但注意这个属性还存在一定的浏览器兼容性，在线上使用需谨慎。 *** 看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～ > 专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）