效果图如下代码如下
代码语言：javascript复制
水平居中行级元素
水平居中块级元素
代码语言：javascript复制
垂直居中方法一
垂直居中方法二
垂直居中方法三
垂直居中方法四
垂直居中方法五
垂直居中方法六
垂直居中方法七
垂直居中方法八
垂直居中方法九
优缺点 || 兼容性 总结
PC端有兼容性要求，宽高固定，推荐absolute + 负marginPC端有兼容要求，宽高不固定，推荐css-tablePC端无兼容性要求，推荐flex移动端推荐使用flex方法
居中元素定宽高固定
PC端兼容性
移动端兼容性
absolute + 负margin
是
ie6+, chrome4+, firefox2+
安卓2.3+, iOS6+
absolute + margin auto
是
ie6+, chrome4+, firefox2+
安卓2.3+, iOS6+
absolute + calc
是
ie9+, chrome19+, firefox4+
安卓4.4+, iOS6+
absolute + transform
否
ie9+, chrome4+, firefox3.5+
安卓3+, iOS6+
table
否
ie6+, chrome4+, firefox2+
安卓2.3+, iOS6+
flex
否
ie10+, chrome4+, firefox2+
安卓2.3+, iOS6+
grid
否
ie10+, chrome57+, firefox52+
安卓6+, iOS10.3+