写点什么

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

作者:南城FE
  • 2024-08-29
    广东
  • 本文字数:1977 字

    阅读完需:约 6 分钟

本文翻译自 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>
复制代码



支持情况:



CSS 对齐一般会使用 flexboxgrid 布局,因为 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;">  包含 <em>多个</em> 节点的内容。</div>
复制代码


<!-- 包装div有效 --><div style="display: grid; align-content: center;">  <div>  <!-- 额外的包装器 -->    包含 <em>多个</em> 节点的内容。  </div></div>
复制代码


<!-- 无需包装div即可工作 --><div style="align-content: center;">  包含 <em>多个</em> 节点的内容。</div>
复制代码


令人惊讶的是,经过几十年的发展,CSS 终于有了 一个属性 来控制垂直对齐!

垂直居中的历史

浏览器很有趣,像对齐这样的基本需求长期以来都没有简单的答案。以下是在浏览器中垂直居中的方法(水平居中是另一个话题):

方法 1: 表格单元格

星级:★★★☆☆


有 4 种主要布局:流(默认)、表格、flexbox、grid。如何对齐取决于容器的布局。Flexbox 和 grid 相对较晚添加,所以表格是第一种方式。


<div style="display: table;">  <div style="display: table-cell; vertical-align: middle;">    内容。  </div></div>
复制代码

方法 2: 绝对定位

星级:☆☆☆☆☆


通过绝对定位间接的方式来实现这个效果。


<div style="position: relative;">  <div style="position: absolute; top: 50%; transform: translateY(-50%);">    内容。  </div></div>
复制代码


这个方式通过绝对定位来绕过流式布局:


  • position: relative 标记参考容器。

  • position: absolute; top: 50% 将内容的边缘放置在中心。

  • transform: translateY(-50%) 将内容中心偏移到边缘。

方法 3: 内联内容

星级:☆☆☆☆☆


虽然流布局对内容对齐没有帮助。它允许在一行内进行垂直对齐。那么为什么不使一行和容器一样高呢?


<div class="container">  ::before  <div class="content">内容。</div></div>
复制代码


.container::before {  content: '';  height: 100%;  display: inline-block;  vertical-align: middle;}.content {  display: inline-block;  vertical-align: middle;}
复制代码


这个方式有一个缺陷,需要额外创建一个伪元素。

方法 4: 单行 flexbox

星级:★★★☆☆


现在布局中的 Flexbox 变得广泛可用。它有两种模式:单行和多行。在单行模式(默认)中,行填充垂直空间,align-items 对齐行内的内容。


<div style="display: flex; align-items: center;">  <div>内容。</div></div>
复制代码


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


<div style="display: flex; flex-flow: column; justify-content: center;">  <div>内容。</div></div>
复制代码

方法 5: 多行 flexbox

星级:★★★☆☆


在多行 flexbox 中,行不再填充垂直空间,所以行(只有一个项目)可以用 align-content 对齐。


<div style="display: flex; flex-flow: row wrap; align-content: center;">  <div>内容。</div></div>
复制代码

方法 6: grid

星级:★★★★☆


Grid 出来的更晚,对齐变得更简单。


<div style="display: grid; align-content: center;">  <div>内容。</div></div>
复制代码

方法 7: grid 单元格

星级:★★★★☆


注意与前一个方法的微妙区别:


  • align-content 将单元格居中到容器。

  • align-items 将内容居中到单元格,同时单元格拉伸以适应容器。


<div style="display: grid; align-items: center;">  <div>内容。</div></div>
复制代码


似乎有很多方法可以做同一件事。

方法 8: margin:auto

星级:★★★☆☆


在流布局中,margin:auto 可以水平居中,但不是垂直居中。使用 margin-block: auto 可以设置垂直居中。


<div style="display: grid;">  <div style="margin-block: auto;">    内容。  </div></div>
复制代码

方法 9: 这篇文章的开头

星级:★★★★★


为什么浏览器最初没有添加这个?


<div style="align-content: center;">  <code>align-content</code> 就是这么简单!</div>
复制代码

总结

CSS 的新特性 align-content 提供了一个简单且直接的方式来实现垂直居中,无需使用额外的 div 包装或复杂的布局模式即可完成垂直居中。但注意这个属性还存在一定的浏览器兼容性,在线上使用需谨慎。




看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~


专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

发布于: 17 分钟前阅读数: 5
用户头像

南城FE

关注

公众号@南城大前端 2019-02-12 加入

专注前端开发,分享前端知识

评论

发布
暂无评论
CSS 终于在 2024 年增加了垂直居中功能_CSS_南城FE_InfoQ写作社区