大神们快来救场话题,想排一个计划,如下图所示,公式怎么写啊

垂直居中的元素处境有很多种情況父元素高度确不确定、文本是单行还是多行、两列图文又想垂直居中等等不同的情况。 但是垂直居中的方法也有很多种情况!table原理、line-height原理、vertical-align原理等等花式解锁垂直居中难题,布局so easy!

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

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

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

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

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

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

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

但是translateY属性,会自动根据盒子高度计算偏移值translateY(-50%)就会向上偏移50%的高度值。所以:

但是学习僦要举一反三,我们同样可以

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

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

好了,废話说的再多也不如贴源码运行一探究竟:

我要回帖

更多关于 汪涵的救场 的文章

 

随机推荐