直接使用align-content: center属性能实现垂直居中

更新日期: 2024-09-20阅读: 1k标签: 居中
在 2024 年的Chrome 123 版本中, css 原生可以使用 1 个 CSS 属性 align-content: center进行垂直居中。

我们都知道align-content: center属性通常用于 Flexbox 布局中,它确保在多行的 flex 容器内的元素在垂直方向上居中排列。但是现在再也不需要依赖于Flex布局或者Grid布局了,它针对普通块级元素也能生效,这就是它的魅力所在!


兼容性

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


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


注意点

align-content针对普通块级元素生效,如果是行内元素display:inline;是不生效的,比如:

<div style="display:inline;align-content:center; height:100px;">
垂直居中
</div

如果改成display:inline-block或block,才能有垂直居中效果。


其他垂垂直居中方式

在这里顺便我们来回顾下以前我们是如何实现内容的垂直居中的。

1.Flexbox(适用于父容器和子元素)

.parent {
display: flex;
align-items: center; /* 垂直居中 */
// justify-content: center; /* 水平居中 */
}


2.Grid(适用于父容器和子元素)

.parent {
display: grid;
align-items: center;//垂直居中
// place-items: center; // 垂直和水平上都居中
//justify-items: center;//水平居中
}


3.使用line-height和vertical-align(适用于单行文本)

.parent {
line-height: 100px; /* 高度 */
}
.child {
vertical-align: middle;
//text-align: center;//水平上居中
}


4.使用transform(适用于块级元素)

.parent {
height: 200px; /* 父容器高度 */
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);

//下面两个属性是实现在水平上也居中
// left: 50%;
// transform: translate(-50%, -50%);
}


5.使用table-cell和vertical-align(适用于单行文本) 

.parent {
display: table-cell;
vertical-align: middle;
// text-align: center;//水平居中
}
.child {
display: inline-block;
}


6.使用before和after伪元素(不常用)

.parent::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.child {
display: inline-block;
}


链接: https://fly63.com/article/detial/12712

css样式——完美解决div水平居中及div水平垂直居中的方法总结

在我们网页开布局中,经常遇到div元素的垂直居中或者水平居中。这篇文章,我总结一下

css图片居中,通过纯css实现图片居中的多种实现方法

在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结。

安卓移动端line-height垂直居中出现偏移的原因,及解决方法

目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的。出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的。

css中line-height的理解_介绍line-height实际应用

css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同。line-height只影响行内元素和其他行内内容,而不会直接影响块级元素。line-height实际应用:图片水平垂直居中、多行文本水平垂直居中、用line-height代替height

如何让子元素在父元素中水平垂直居中七种方法?

第一种:定位+margin:auto,注意:兼容性较好,缺点:不支持IE7以下的浏览器.第二种:定位+margin-left+margin-top注意:兼容性好;缺点:必须知道元素的宽高,第三种:定位+transfrom

css垂直居中的几种实现方式

相比较水平居中,垂直居中比较复杂点。尤其是在实际页面中,有很多特殊的场景,导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式

div元素宽度不定的情况下如何居中显示

方法一:兼容IE67,但是当元素宽度大于50%时,会出现滚动条。外层使用text-align为center是为了让里面的内联元素居中,很显然在外层设置text-align:center后

CSS 不定宽高的垂直水平居中方式总汇

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法,是的,你没有看错

CSS中实现图片垂直居中

在曾经的 淘宝UED 招聘 中有这样一道题目:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。当然出题并不是随意,而是有其现实的原因

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!