您的位置:首页 > 其它

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

2017-05-30 22:31 218 查看
如何让浮动的元素垂直居中

 
解释:我们可以通过子绝父相的定位方式让子元素的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。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  居中