CSS 终于有了元素垂直居中的属性

技巧 隔壁老李于 2024-09-20 11:42:21 最后编辑
文章总结
AI正在生成摘要

CSS新增元素垂直居中属性,无需依赖Flex或Grid布局。通过设置`align-content: center`即可实现。例如:`div{height:150px;border:solid;align-content:center}`。此属性具有良好兼容性。

2024 年了,CSS 原生属性中终于有了垂直居中的功能,他就是之前 Flex 布局和 Grid 布局中使用的 align-content: center。

之前要实现垂直居中,通常都是要使用 flexbox 或 grid 布局。

align-content 在默认的流式布局中是不起作用的。

比如这样:

<style>
.flex {
  height: 150px;
  border: solid;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
</style>
<div class="flex">
  <div>flex垂直居中</div>
</div>

又比如这样:

<style>
.grid {
  height: 150px;
  border: solid;
  display: grid;
  align-content: center;
}
</style>
<div class="grid">
  <div>grid垂直居中</div>
</div>

现在,你不需要再使用 flexbox 或 grid 布局就可以轻松实现元素垂直居中。

只需要直接这样:

<style>
div {
  height: 150px;
  border: solid;
  align-content: center;
}
</style>
<div>
  包含 <em>多个</em> 节点的内容。
</div>

CSS 终于有了元素垂直居中的属性  第1张

兼容性如下:

CSS 终于有了元素垂直居中的属性  第2张

赞赏
取消
扫码支持 支付码
本文由 @隔壁老李 于 2024-09-20 发布在 野路子博客,如无特别说明,本博文章均为原创,转载请保留出处。
评论 (1)
访客
风中的旋律
CSS原生支持垂直居中功能,简化布局实现。
· 来自山东省青岛市 · 回复
Top