CSS终于在2024年增加了垂直居中功能align-content:center

CSS终于在 2024 年增加了垂直居中功能align-content: center,CSS 对齐一般会使用 flexbox 或 grid 布局,因为 align-content 在默认的流式布局中不起作用。在 2024 年,浏览器实现了 align-content。

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

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

CSS终于在2024年增加了垂直居中功能align-content:center

支持情况:

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;">
  包含 <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包装或复杂的布局模式即可完成垂直居中。但注意这个属性还存在一定的浏览器兼容性,在线上使用需谨慎。

原创文章,作者:howkunet,如若转载,请注明出处:https://www.intoep.com/frontend/63759.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024年9月2日 10:06
下一篇 2024年9月3日 10:15

相关推荐

  • 推荐一款免费的网页打印控件

    做过网页打印的应该都清楚,如果想使用js直接调用本地打印机进行打印任务都需要基于打印控件,因为js不能直接调用打印机,即使是google浏览器也是内置的打印控件。 网页打印控件比较…

    JavaScript 2021年12月16日
    01970
  • Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题

    最近写了一个网页,页面很多元素使用的是Fixed定位,当在手机端的Safari浏览器、安卓浏览器等测试时,会出现顶部元素、底部元素 被地址栏、菜单栏或工具栏遮挡的情况。于是,我查阅…

    2024年11月27日
    0550
  • CSS代码判断实现PC端隐藏 手机端显示

    CSS代码判断实现PC端隐藏 手机端显示,有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等。我们可以使用下面的代码来实现:电脑端显示,手机端隐藏

    Html/CSS 2021年11月25日
    05310
  • 常用的一些CSS代码规则

    常用的一些CSS代码规则:限制视口内的内容宽度、增加正文文本大小、增加文本行之间的间距、限制图片宽度、限制内容中文本的宽度、以更平衡的方式包裹标题、表单控件颜色与页面样式匹配、易于跟随的表格行

    2024年8月8日 Html/CSS
    0910
  • 使用Google内核浏览器调试真机网页

    所有的Google内核浏览器都自带真机调试,可以通过USB或者WiFi对手机上Google内核的网页进行调试。

    2024年11月18日
    0600
  • uniapp小程序自定义头部导航区域

    uniapp项目小程序中难免会有一些页面需要自定义头部导航区域,因为原生的头部太简陋了,本文记录下uniapp自定义小程序的头部导航。 首先要把小程序自带的头部去掉,在pages.…

    2024年8月6日 前端开发
    01110

发表回复

登录后才能评论
分享本页
返回顶部