需求：有時頁面內的一些容器需要定位在特定的某個位置，但是需要容器在水平方向上面居中顯示，比如頁面內的一個背景圖里面放置一個容器，使用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; /* 有了這個就自動居中了 */ }

總結

以上是生活随笔為你收集整理的绝对定位元素设置水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。