在css的世界里,如果我们想让一个块级元素水平居中,想必大家都知道利用margin:0 auto;嘛,这样就可以让块级元素在它的父元素中水平居中了。
列如这样:
center
运行效果图如下,绿色方块水平居中于它的父元素
咦,那么问题来了,我们想要绿色方块垂直居中或者水平垂直居中呢?
是不是只要设置margin:auto 0;或margin:auto;就可以了呢?
曾经我也是这么以为的,因为设置margin:0 auto;可以水平居中嘛。
但是垂直居中就不是这么回事啦。
在普通文档流中,倘若你设置margin:auto,其实浏览器解析时,会理解为margin:0 auto;
(将margin-top和margin-bottom设置为0,而margin-left和margin-right设置为左右自适应)。
摘自W3.org
如果你心存顾虑,可以将上面demo中的margin:0 auto;换成margin:auto;,运行后的结果是一样的。
咦,那如果我们现在想让块级元素垂直居中呢,如何处理?
方法一:
将元素设置为绝对定位absolute,这样就可以让元素脱离普通文档流,且absolute有一特性:会将元素的display设置为block。
然后,再设置绝对定位的坐标(left,top,right,bottom)为0,这样会使浏览器为绝对定位包裹一层新的盒子模型。
再结合margin,就可以你想水平居中(margin:0 auto;)就居中,垂直居中(margin:auto 0;)就居中了,水平垂直居中(margin:auto;)也完美。
下面列举的demo为‘水平垂直居中’:
center