专栏名称: 全栈修仙之路
专注分享 TS、Vue3、前端架构和源码解析等技术干货。
今天看啥  ›  专栏  ›  全栈修仙之路

2024 年 CSS 终于增加了垂直居中特性!

全栈修仙之路  · 公众号  ·  · 2024-09-26 09:14

文章预览

在 2024 年的 Chrome 123 版本中, CSS 原生可以使用  1 个 CSS 属性   align-content: center 进行垂直居中。 有何魅力? 这个特性的魅力在哪儿呢?我举例给你看一下 < div   style = "align-content:center; height:200px; background: #614ef5;" >    < sapn > align-content sapn >  :我能垂直居中! div 相信你也发现了,   align-content: center 属性实现垂直居中, 再也不需要依赖于 Flex 布局或者 Grid 布局了,它针对 普通块级 元素就生效,这就是它的魅力所在🔥! 我能用吗? 接下来,我们再看一下 align-content 这个属性的浏览器支持情况: 这是 can i use 网站的截图,可以看到主流浏览器, 现在绝大部分版本都是支持的,可以比较放心的使用😺 我要注意哪些坑? 看看直接使用 align-content 有哪些注意点。 行内元素不生效 前面我提到了, align-content 针对普通块级元素生效, 什么意思呢 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览