2024 年 CSS 终于增加了垂直居中特性,效率翻倍!

时事   2024-09-23 11:50   浙江  
在 2024 年的Chrome 123 版本中, CSS 原生可以使用 1 个 CSS 属性 align-content: center进行垂直居中。

有何魅力?

这个特性的魅力在哪儿呢?我举例给你看一下

<div style="align-content:center; height:200px; background: #614ef5;">
  <sapn>align-content</sapn> :我能垂直居中!
</div

image.png

相信你也发现了,  align-content: center属性实现垂直居中, 再也不需要依赖于Flex布局或者Grid布局了,它针对普通块级元素就生效,这就是它的魅力所在🔥!

我能用吗?

接下来,我们再看一下align-content这个属性的浏览器支持情况:

这是 can i use 网站的截图,可以看到主流浏览器, 现在绝大部分版本都是支持的,可以比较放心的使用😺

我要注意哪些坑?

看看直接使用 align-content有哪些注意点。

行内元素不生效

前面我提到了, align-content针对普通块级元素生效, 什么意思呢😵?我们看,下面这个代码就不生效

<div style="display:inline;align-content:center; height:200px; background: #614ef5;">
  <span>align-content</sapn> :我能垂直居中!
</div

image.png

如果改成display:inline-block是有效果的:

image.png

其实就是inline行内元素不生效!

flex布局要小心

接着改为flex布局display:flex, 发现align-content:center没有生效。这是为什么呢?你前面不是说原来align-content数据依赖Flex布局才起作用吗,为什么我改成Flex布局反而不生效了呢

带着这个疑问往下看↓

image.png

找到不生效的css样式,浏览器已经给了提示, 意思就是align-content:center这个属性在flex-wrap:no-wrap中不生效,那我们再增加几个元素来试一下:

<style>
.box{
  display:flex;
  align-content:center; 
  height:200px
  background#dcd7ff;
}
.box span{
  width:46px;
  height:46px;
  background-color:#9181ff;
  border-radius:4px;
  margin-left:10px;
}
.box2{
  margin-top:20px;
  flex-wrap:wrap;
}
</style>
<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="box box2">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

添加flex-wrap:wrap;前后对比:

留个疑问

最后给大家留一个思考题🧐

flex中垂直居中,你是否想到了align-items:center,大部分情况我们都是用的这个属性来实现垂直居中,和align-content:center有什么区别呢?

推荐阅读  点击标题可跳转

1、分享10 个功能强大的单行 CSS 布局技巧

2、CSS加载会造成堵塞吗?

3、JavaScript 之父联手近万名开发者集体讨伐 Oracle:给 JavaScript 一条活路吧!

前端大全
点击获取精选前端开发资源。「前端大全」日常分享 Web 前端相关的技术文章、实用案例、工具资源、精选课程、热点资讯。
 最新文章