margin:auto为什么不垂直居中

  • margin:auto为什么不垂直居中已关闭评论
  • 31 次浏览
  • A+
所属分类:Web前端
摘要

margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向上应该获得的剩余空间大小。


margin:auto为什么不垂直居中

margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向上应该获得的剩余空间大小。

行内元素margin:auto; 不能水平居中在一行的中央位置(行内元素不独占一行)。

 

position定位属性大家都不会陌生,添加position属性的元素可以定位,而top,left,right,

bottom属性决定元素定位后所在的位置,而在使用定位属性需要注意两点:

1.top,left, right, bottom 此类定位属性只对添加了position属性且值为非static的元素生效,即值为fixed,absolute,relative 其一。
2.在使用top,left,right与bottom属性时一般只设置两个属性进行定位,比如常见的top与left为一对,设置了top一般不会再设置bottom。

通过设置top,left四属性为0居中元素的做法有个前置条件,就是需要居中的盒子必须有固定的宽高(px),否则会失效。这就像四个方向有相同的力在拉这个盒子,配上margin:auto让这个盒子的位置保持中立,来达到盒子处于正中心的目的。

.div1{

height:100px;

widyh:100px;

background-color:blue;

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

}

<div class="div1"><div/>

left:0;right:0;top:0;bottom:0;再加上margin:auto,会使div1居中,如果div1,没有宽高,则会继承父集的宽高。适合body 内的遮罩

margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向上应该获得的剩余空间大小。

行内元素margin:auto; 不能水平居中在一行的中央位置(行内元素不独占一行)。