實現絕對定位元素水平垂直居中的兩種方法

平時,用的方法即第一種方法是設置left,top值均為50%,同時margin-left設置為絕對定位元素width的一半取負,margin-top設為其height的一半取負。

例如，絕對定位元素的width:100px;height:100px;

代碼如下:

position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;

這是比較常用的一個方法，今天介紹一個巧妙的方法，是利用了絕對定位元素的自動伸縮的特性實現的。

代碼如下：

position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;

上面就是第二種方法：設置margin:auto;設置left和right的值相等,top和bottom的值相等,
注意：left和right的值不能超過其相對元素width減去它自身width的一半,否則絕對定位元素會優先取left值進行定位(前提是文檔流是從左向右),但是top和bottom的值卻沒有這個限制。