css 块状元素垂直水平居中的方法

本文介绍了多种使用CSS实现元素水平垂直居中的方法,包括使用定位、css3样式属性display:flex、绝对定位+css3样式属性transform等。同时还提及了各方法的适用场景、注意事项以及在PC端和移动端不同浏览器的兼容性情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.使用定位 .box { position: absolute; top: 50%; left: 50%; margin: -100px -100px; width: 200px; height: 200px; background: #5B83AD; } 这里需要注意的是这种方法适用于已知块状元素的具体大小, margin 的百分比值参照其包含块的宽度进行计算,所以不能使用-50%。

2.css3样式属性display:flex设定水平垂直居中 .box{ width: 100%; height: 450px; display: flex; } .childBox{ margin: auto; width: 50%; height: 50%; } 这里的块状元素高度未知或者高度自适应的时候依然可以使用。对于PC端,一般chrome(测试版本:49.0.2623.110 m)和火狐(测试版本:49.0.2)都能很好地支持。ie不支持,显示的是顺序排列下来的宽度100%的模块。

对于移动端:

(1)上述代码iOS的原生safari浏览器是支持的;UC浏览器支持的很好;微信浏览器不支持(测试机型:苹果4s)

(2)安卓的原生浏览器不支持,能够正常显示模块,文档流依次排列;UC浏览器不支持,显示为空白;微信浏览器不支持(测试机型:华为荣耀6 Plus,Android4.4.2)

3.使用绝对定位+css3样式属性transform .box { background: #6c94be; width: 100%; height: 450px; position: relative;
} .childBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #5B83AD; width: 200px; } 这里需要注意transform中translate偏移的百分比值是相对于自身大小的,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的,但问题是兼容性不好。IE9+以及其他现代浏览器才支持。IE9之前版本不支持,在IE8模式下,不居中。并且偏移在某种情况下也会导致像素模糊。

4.绝对定位更好一点的写法 .box { background: #6c94be; width: 100%; height: 450px; position: relative; } .childBox { position: absolute; left: 0; bottom: 0; width: 200px; height: 200px; background: #5B83AD; margin: auto; }

5.设置为行内元素 .box{ width: 500px; height: 500px; line-height: 500px; text-align: center; background: red; } .childBox{ height: 200px; width: 200px; display: inline-block; vertical-align: middle; background: yellow; }

6.grid布局 .box { display: grid; } .childBox { align-self: center; justify-self: center; } 缺点是兼容问题。

转载于:https://juejin.im/post/5ce5067ef265da1b8a4ef3c1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值