首先将垂直居中的现象和实现方式两大方向细分类如下：

接下来逐条累加不同情况下的垂直居中实现

一、父元素高度固定时，单行文本 | 图片的垂直居中

他除了适用于这個弹层的场景同样适用于其他场景的居中。因为即使不浮动translate移动对兄弟元素没有影响。

这种现象和margin移动不一样只不过其他场景使用translate囿点大材小用。

利用transform来实现垂直居中布局：

因为没有高度固定所以无法确切的使用margin-top负值实现垂直居中

但是css3中的transform的translate属性，会自动根据盒子高度计算偏移值

如果将relative换成absolute，想实现水平垂直居中的弹窗效果时：

但是学习就要举一反三，我们同样可以

利用transform来实现水平居中布局：

 那么如果跟之前的垂直居中合并起来的话，transform是不是也可以写一条呢

好了，废话说的再多也不如贴源码运行一探究竟：