有時候，要實現一些元素水平垂直都居中，這部分元素呢 可能大小未知，例如一些圖片或者是一些未知大小的塊元素。
利用絕對定位可以將要居中的元素脫離文檔流.
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了，也是通過計算所得。所以能實現垂直居中。