1.絕對定位元素的居中實現(xiàn)的一般方法

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

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

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

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

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

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

2.margin:auto實現(xiàn)絕對定位元素的居中

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

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

3.悠悠哉哉再說點什么

當(dāng)一個絕對定位元素，其對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候，流體特性就發(fā)生了

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

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

比如：

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。