1.絕對定位元素的居中實現的一般方法

兼容性不錯的主流用法是：

但，這種方法有一個很明顯的不足，就是需要提前知道元素的尺寸。否則margin負值的調整無法精確。此時，往往要借助JS獲得。

CSS3的興起，使得有了更好的解決方法，就是使用transform代替margin. transform中translate偏移的百分比值是相對于自身大小的，于是，我們可以：

于是乎，無論絕對定位元素的尺寸是多少，其都是水平垂直居中顯示的。

然，問題很明顯，兼容性不好。IE10+以及其他現代瀏覽器才支持, IE9(-ms-), IE10+以及其他現代瀏覽器才支持。中國盛行的IE8瀏覽器被忽略是有些不適宜的（手機web開發可忽略）。

實際上，絕對定位元素的居中實現還有另外一種方法，可以說是權衡了上面的尺寸自適應以及兼容性的一個方案，其實現的核心是margin:auto

2.margin:auto實現絕對定位元素的居中

首先，我們來看下CSS代碼：

代碼兩個關鍵點：1.上下左右均為0；2.margin: auto。于是就居中了。

3.悠悠哉哉再說點什么

當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性就發生了

如果只有left屬性或者只有right屬性，則由于包裹性此時box寬度是0。但是在本例中，因為left/right同時存在，因此寬度就不是0，而是自適應于.box包含塊的padding box寬度，也就是隨著包含塊padding box的寬度變化，.box的寬度也會跟著一起變。

觸發流體特性且是絕對定位的元素的margin:auto填充規則和普通流體元素填充規則一模一樣：
1.如果一側定值，一側auto，auto為剩余空間大小
2.如果兩側均是auto, 則平分剩余空間

比如：

此時.son這個元素的尺寸表現為“格式化寬度和格式化高度”，和<div>的“正常流寬度”一樣，同屬于外部尺寸，也就是尺寸自動填充父級元素的可用尺寸的，然后，此時我們給.son設置尺寸，例如

此時son的寬高被固定限制，原本應該填充的空間就被多余了出來，這多余的空間就是margin:auto計算的空間，因此，如果這時候，我們再設置一個margin:auto，那么：

我們這個.son元素就水平和垂直方向同時居中了。因為，auto正好把上下左右剩余空間全部等分了，自然就居中啦！

總結

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

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