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

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

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

缺點：該種方法需要提前知道容器的尺寸，否則margin負值無法進行精確調整，此時需要藉助JS動態獲取。

方法二、容器尺寸未知的前提下，使用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開發可忽略）。

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

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