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