2024终于可以仅用1个css属性就实现垂直居中了!! 附:总结以往常用的实现垂直居中方法

Luckyfif

于 2024-09-06 00:25:45 发布

阅读量189

点赞数 8

分类专栏：前端分享文章标签： css 前端

本文链接：https://blog.csdn.net/Mz0127/article/details/141947720

版权

前端分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在 2024 年的Chrome 123 版本中， CSS 原生可以使用 1 个 CSS 属性 align-content: center就完成垂直居中。

有何魅力？

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

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

相信你也发现了, CSS 的新特性align-content: center 提供了一个简单且直接的方式来实现垂直居中，无需使用额外的div包装或复杂的布局模式即可完成垂直居中, 再也不需要依赖于Flex布局或者Grid布局了，它针对普通块级元素就生效，这就是它的魅力所在🔥！。但注意这个属性还存在一定的浏览器兼容性，在线上使用需谨慎。

这里也分享一个用于查看可以使用哪些html5\css3属性的网站Can I Use 中文

总结以往常用的实现垂直居中方法

在前端开发中，实现垂直居中是一个常见的需求，特别是在构建响应式布局和复杂UI时。以下是几种常用的实现垂直居中的方法：

1. Flexbox

Flexbox（弹性盒子模型）是CSS3引入的一种布局方式，非常适合用于垂直居中。只需将父容器设置为display: flex; 和 align-items: center; 即可实现垂直居中（同时也可能实现水平居中，取决于justify-content的值）。

.parent {  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  height: 100vh; /* 假设父容器高度为视窗高度 */  
}

2. Grid

CSS Grid（网格布局）也是CSS3引入的一种强大的布局系统，同样可以轻松实现垂直居中。通过设置align-items或place-items属性，可以在网格容器中垂直居中项目。

.parent {  
  display: grid;  
  place-items: center; /* 同时实现水平和垂直居中 */  
  height: 100vh;  
}

3. 绝对定位 + 转换

使用绝对定位将子元素相对于父元素定位，并通过transform属性向上或向下移动子元素的一半高度，从而实现垂直居中。这种方法的好处是它不需要知道子元素的具体高度。

.parent {  
  position: relative;  
  height: 100vh;  
}  
  
.child {  
  position: absolute;  
  top: 50%;  
  transform: translateY(-50%);  
  /* 宽度等其他样式 */  
}

4. 表格布局

将父元素设置为display: table;，子元素设置为display: table-cell;，然后使用vertical-align: middle;来实现垂直居中。这种方法比较古老，但在某些特定场景下仍然有用。

.parent {  
  display: table;  
  height: 100vh;  
  width: 100%;  
}  
  
.child {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center; /* 如果需要水平居中 */  
}