margin:auto实现盒子水平垂直居中

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 内的遮罩