絕對定位元素設置水平居中

需求：有時頁面內的一些容器須要定位在特定的某個位置，可是須要容器在水平方向上面居中顯示，好比頁面內的一個背景圖裏面放置一個容器，使用margin-top不方便，就決定使用絕對定位來設置。

實現方法：
方法1、知道容器尺寸的前提下

.element {
    width: 600px; height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 寬度的一半 */
}

缺點：該種方法須要提早知道容器的尺寸，不然margin負值沒法進行精確調整，此時須要藉助JS動態獲取。

方法2、容器尺寸未知的前提下，使用CSS3的transform屬性代替margin，transform中的translate偏移的百分比值是相對於自身大小的，設置示例以下：

.element {
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%); /* 50%爲自身尺寸的一半 */
    -webkit-transform: translate(-50%, -50%);
}

缺點：兼容性很差，IE10+以及其餘現代瀏覽器才支持。中國盛行的IE8瀏覽器被忽略是有些不適宜的（手機web開發可忽略）。

方法3、margin: auto實現絕對定位元素的居中

.element {
    width: 600px; height: 400px;
    position: absolute;
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;  /* 有了這個就自動居中了 */
}