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

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