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; 不能水平居中在一行的中央位置（行内元素不独占一行）。