总结CSS居中的多种方法_html/css_WEB-ITnose

1. 首先来聊聊水平居中：

就像这样：

See the Pen mVpVEr by xal821792703 ( @honoka ) on CodePen .

HTML 中在想要居中的元素外面套了一个父元素，然后在 CSS 中将父元素的 text-align 属性设为 center，接下来将子元素的 display 属性设为 inline-block 就可以水平居中了。

See the Pen rxpxmR by xal821792703 ( @honoka ) on CodePen .

通过 margin 实现连父元素都不用套了，直接 margin: 0 auto; 搞定，对，就是这么简单快捷，恐怕是居中最常用的方法了吧。

2. 结果老板表示只是水平居中不行，还得垂直居中：

See the Pen NxXxBz by xal821792703 ( @honoka ) on CodePen .

注意代码中的几个关键点：

See the Pen xZpZMw by xal821792703 ( @honoka ) on CodePen .

使用 flex 容器布局实现水平垂直居中的关键点在于：

另外请注意兼容性问题，见下图：

其实利用 CSS 实现居中还有许多方法我没有写在博文中，如何选择居中的技术方案，最后还是得取决于当前业务场景下的浏览器支持程度和适合度。