常用的水平居中和垂直居中方法（搞定垂直居中的三种方法）

点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

前端布局是整个web开发非常重要的一环，也是最基础和最前面的一个环节。有关居中布局分垂直和水平方向。今天我简单搞几个常用的垂直居中的CSS写法。

一、使用table-cell vertical-align

其原理就是将父框转化为一个表格单元格显示，相当为td/th，再通过设置其属性vertical-align将其内容垂直居中。代码如下所示：

这个方法的优点就是兼容性较好，IE8以上均支持。效果如下所示：

这个方法的优点是居中元素不会对其他的元素产生影响。

不好的地方是：transform属于CSS3内容，兼容性存在一定问题。需要添加一些前缀。

三、使用flex align-items

通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。

这个方法的好处是： 只设置parent

不好的地方是兼容性存在一定问题

最后总结一下：

前端布局有居中布局，多列布局以及全局布局等好多玩法。下篇在续

,