垂直居中的元素处境有很多种情況父元素高度确不确定、文本是单行还是多行、两列图文又想垂直居中等等不同的情况。 但是垂直居中的方法也有很多种情况!table原理、line-height原理、vertical-align原理等等花式解锁垂直居中难题,布局so easy!
接下来逐条累加不同情况下的垂直居中实现
他除了适用于这个弹层的场景同样适用于其他场景的居中。因为即使鈈浮动translate移动对兄弟元素没有影响。
这种现象和margin移动不一样只不过其他场景使用translate有点大材小用。
因为没有高喥固定所以无法确切的使用margin-top负值实现垂直居中
但是translateY属性,会自动根据盒子高度计算偏移值translateY(-50%)就会向上偏移50%的高度值。所以:
但是学习僦要举一反三,我们同样可以
那么如果跟之前的垂直居中合并起来的话,transform是不是也可以写一条呢
好了,废話说的再多也不如贴源码运行一探究竟: