在 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; /* 如果需要水平居中 */
}
5. 垂直对齐属性
在一些特定场景下,如行内元素或行内块级元素,可以使用vertical-align: middle;
来实现垂直居中,但这通常需要在父元素上设置一些额外的样式(如line-height
),并且这种方法主要用于文本或行内元素的垂直居中。
结论
以上是实现垂直居中的几种常见方法,每种方法都有其适用的场景和优缺点。新属性给开发者带来了一定的便利,不过并不影响Flex和Grid的重要性和实用性,我们需要根据使用场景的不同来选择实现的方式。