如何让浮动的元素垂直居中

如何让浮动的元素垂直居中

个人github：https://github.com/qiilee  欢迎follow

一：

 

解释：我们可以通过子绝父相的定位方式让子元素的left和top都移动50%，这个时候是整个元素移动到了父元素一半的位置，并不是两个元素的中线对齐，所以我们需要让子元素再向反方向移动一半的位置，我们可以利用margin-left和margin-top分别移动子元素宽高的一半，但是这种方式并不好，因为子元素的大小一旦被修改，那么我们也要修改margin值才能保持原状，所以我们可以利用css3中的新属性transform，通过translate(-50%,-50%)可以轻松实现功能，并且后续维护修改更方便。

二、不知道将要垂直居中的盒子的宽高

 

 

解释：同样，我们需要1、子绝父相的定位方式，只需要给子元素加上

                    2、margin：auto；

                    3、Left：0；right：0；top：0；bottom：0；即可实现。

方法一和方法二实现的效果：

 

 

三、关于让img标签在容器中垂直居中的问题

 

 

效果：

 

 

注：使用了display：table-cell后无法使用margin和padding。