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

### 使用 CSS 实现 `div` 元素水平垂直居中方法 #### 方法一:Flexbox 布局 为了使子元素 `.child` 在其父容器 `.parent` 中实现水平垂直居中,可以通过设置 Flexbox 的属性来完成。 ```css .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 此方式适用于现代浏览器,并且具有良好的兼容性和简洁的语法[^1]。 #### 方法二:表格单元格模拟法 另一种方案是利用表格式布局特性,在父级元素上定义样式使其表现得像一个表格单元格: ```css .parent { display: table-cell; text-align: center; /* 文本或行内元素水平居中 */ vertical-align: middle; /* 行内/块状内容垂直居中 */ } .child { margin: 0 auto; /* 对于块级元素来说,这会使得它们水平居中 */ } ``` 这种方法同样能够有效地让内部的内容保持中心位置[^4]。 #### 方法三:绝对定位配合 transform 属性 如果希望更灵活地控制元素的位置,则可以采用绝对定位加变换的方式来进行调整: ```css .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这种方式非常适合那些尺寸固定不变的小型组件[^2]。 #### 方法四:Grid 布局 虽然 grid 的兼容性稍逊一些,但它提供了非常强大的二维空间管理能力。只需要几行简单的代码就可以轻松达成目标效果: ```css .parent { display: grid; place-items: center; /* 同时实现了水平垂直方向上的居中 */ } ``` 尽管如此,考虑到实际项目的需求以及不同设备的支持情况,建议优先考虑其他更为广泛支持的方法[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值