CSS之margin: auto;居中

有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素。 利用绝对定位可以将要居中的元素脱离文档流.  position: absolute; left:0p...

有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素。


利用绝对定位可以将要居中的元素脱离文档流.

 position: absolute;
 left:0px;
 right: 0px;
 top:0px;
 bottom: 0px;


但他的父元素要设成相对定位

position: relative;


这样设置完成后 会发现子元素并没有居中。这是因为虽然脱离了文档流但是top的bottom的值是相等的。根据优先级会自动向上对齐。同理左右也是如此。


这时在要居中的元素中加上

margin:auto;


margin:auto会自动去计算子元素和父元素之间的边距,并设为居中。所以就会实现上下左右都居中。


那么还有一个问题,既然居中是有margin:auto来计算实现。为什么还需要将元素设为绝对定位呢?


这是因为margin:auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说,margin:auto和margin:0 auto 在一般情况下没有区别,不能实现垂直居中。


但是有了绝对定位后,margin-top和margin-bottom 的值就不是0了,也是通过计算所得。所以能实现垂直居中。


最后,发出完整的css类

.center{
               position: absolute;
               left:0px;
               right: 0px;
               top:0px;
               bottom: 0px;
               margin:auto;
               background: pink;
               text-align: center;
               vertical-align:middle;
    }


总结:默认设置margin:auto可以让块级元素水平居中,auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说,margin:auto和margin:0 auto 在一般情况下没有区别,不能实现垂直居中。


但是有了绝对定位后,margin-top和margin-bottom 的值就不是0了,也是通过计算所得。所以能实现垂直居中。

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
王凯
王凯

92 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. 央视新闻 0 文章