阅读 1736

css实现元素水平垂直居中

1.绝对定位,利用负边距

利用负边距实现子元素居中(相对于父元素(position:relative)),需已知子元素的width与height;且把子元素的position设为absolute,绝对定位;以及设置left和top为50%;再加上负边距,margin-left值为width的一半,同样的,margin-top值为height的一半。

我们来理解一下,绝对定位的子元素,通过自身的边界来相对于父元素进行定位,这个边界就是margin,当我们设置了left和top各为50%时,子元素左边界距父元素左边界50%,上边界距父元素上边界50%,其实此时,我们可以知道,子元素的左上角这个点,是水平垂直居中的,当我们设了负边距时,我们可以理解为这个子元素向右向上各移了自身长度的一半,这就达到了水平垂直居中。当然我们也可以这么理解,其实真正相对于父元素来定位的点就是子元素左上角的点,当我们设了负边距,子元素的中心点就取代了它左上角的点,若希望子元素能水平垂直居中,这时只需再设left和top各为50%时便可。代码如下:

2.绝对定位,margin:auto

使用绝对定位方式, 以及left:0;right:0;top:0;bottom:0;margin:auto

当我们为子元素设置left:0;right:0;top:0;bottom:0;时,浏览器将给子元素重新分配一个边界框,此时子元素将填充其父元素的所有可用空间,当我们给子元素设置一个width或height,防止子元素占据所有的可用空间,浏览器将根据新的边界框重新计算,再加上margin:auto,由于被绝对定位,脱离了正常的文档流,浏览器会给margin-left,margin-right相同的值,margin-top,margin-bottom相同的值,使元素块在父元素中水平垂直居中。 代码如下:

3.Flex

Flex布局即为弹性布局,只需将父元素设置三个属性即可(display,justify-content,align-items)代码如下:

4.Transform

CSS3中新增的transform属性, 代码如下:

总结

1.利用负边距方法优点是具有良好的跨浏览器特性,兼容IE6/IE7,但是缺点是不能自适应,需设置子元素的宽高,不支持百分比,且负边距值与padding和是否定义box-sizing: border-box有关,计算需要根据不同情况。

2.利用margin:auto方法支持跨浏览器,支持百分比,但是必须声明子元素的width或height(至少一项,不然会占据父元素所有空间)。

这两种绝对定位方法,可在子元素中,设置overflow:auto来防止内容越界溢出

3.利用flex或transform方法的好处是代码量少,且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开,优雅地溢出。但flex IE8/IE9不支持,transform IE8不支持,且属性需要写浏览器厂商前缀。

4.html结构如下:

5.实验结果如下:(实现了子元素的水平垂直居中,同时可观察到两张图溢出的方式不同)
绝对定位的溢出(overflow:auto):

flex或transform的溢出:

文章分类
前端