CSS 垂直居中常用的多种方法

垂直居中是布局中十分常见的效果之一，在面试中也是经常问到的点；CSS布局还是采取截图把代码贴出来，因为想学习只有敲出来才会有理解，只看或者复制粘贴当时都会说嗯嗯嗯。。。妙啊

①display:table-cell(此方法适用子节点没有固定宽高)

结果：

②定位和负边距(此方法对子节点没固定宽高不适用)

结果：

③ 定位和0(此方法对子节点没固定宽高不适用)

结果：

④定位和transform(此方法适用子节点没有固定宽高)

结果：

注： Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）

⑤ display:flex(IE不支持)

关于flex布局，相信每一位合格的前端开发人员都会去参考阮一峰老师的flex布局教程

Flex布局语法篇

Flex布局实例篇

结果：

⑥display:flex和margin:auto(此方法适用子节点没有固定宽高)

结果：

总结：关于垂直居中应该还会有很多方法，但是上述这些方法都是实际开发中常用的，欢迎大家的补充和指正