position:absolute和margin:auto連用居中的原理？
1. 在網上看到這麼一種寫法，可以實現div的豎直、左右都居中，但是在網上找了一圈，都沒有能夠講解原因的，知道對於很多CSS樣式的解釋都是很難理解的，所以問問有沒有了解的。
position: absolute; top: 0; bottom： 0； left: 0; right: 0; margin: auto;
2. 順便求詳細講解 float、position、display 這三個CSS樣式特點、關係的文章，最近越看越是糊塗...
position: absolute; top: 0; bottom： 0； left: 0; right: 0; margin: auto;
ps：為了解釋方便，下面說的父元素都是 最近的 已經定位了的元素。
你把 margin:auto； 去掉 有沒發現佔了全屏？ 因為 left, top，bottom，right 的解釋很清楚，left是 元素的左邊緣，距離父元素的左邊緣的距離。 當然此時你要是知道 css的盒子，就應該知道，是 子元素的 左margin 距離 父元素的 左padding的 距離。 （ps：如果父元素的 box-sizing: border-box; 那就去掉父元素的 padding 和 border）。因此position: absolute; top: 0; bottom： 0； left: 0; right: 0;
就是表明，我聲明一個元素， 絕對定位，它的 上下左右 四個邊距離父元素 都是0；
怎麼樣才能 上下左右 都是 0？ 只能佔滿父元素咯 ！margin: auto;
表明我的外邊距由 計算機自動計算。 其實就是 減掉 padding 和 border 和內容寬高後除以2.
再由之前說的，是 子盒子的 margin-left 與父元素的 padding-left的距離為 0；而 margin:auto;後 又是設置了盒子的各個margin , 所以根據上面得到的計算值, 就能得到 div 居中了。總結下：
你的樣式聲明就是（父元素box-sizing: border-box; 除外。他是個例外 ）一個盒子 和 父盒子的 內容一樣大。 這個盒子的四周margin 都是由計算機計算得到。
其實這樣聲明並不是 真正的讓盒子居中了。 因為盒子大小和 父元素的 內容 區域一樣大。這樣聲明只是margin 由計算機計算後，把你的 border＋padding＋內容 顯示在中間，看起來居中了。再最後一句話; 盒子並沒居中，只是 中間顯示的 內容看起來居中了。為什麼「margin:auto」可以讓塊級元素水平居中？ - 前端開發這個裡面 @貘吃饃香 把margin auto說的很清楚了。騷年，我發現你骨骼驚奇，故有一鏈接相贈，請自備英漢大字典或XX翻譯
CSS Flexible Box Layout Module Level 1
啊，抱歉拿錯了，這個是Testing的，給你Completed的
Visual formatting model
Box model
一般來說，只要不是Safari這種用著webkit內核依然不知道哪兒抽風各種實現不一樣的瀏覽器，都會按照W3C既定的標準去處理各種情況下顯示元素以達到相同的顯示效果的這篇文章http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/，這裡面有對其原理進行了講解，你可以研究研究
stackoverflow上有討論過這個問題，看這裡 css - Best way to center a & on a page vertically and horizontally?
這裡也有相應的解釋，Absolute Horizontal And Vertical Centering In CSS
- In the normal content flow, margin: auto; equals 『0』 for the top and bottom.W3.org: If 『margin-top』, or 『margin-bottom』 are 『auto』, their used value is 0.
- position: absolute; breaks the block out of the typical content flow, rendering the rest of the content as if that block weren』t there.Developer.mozilla.org: …an element that is positioned absolutely is taken out of the flow and thus takes up no space
- Setting top: 0; left: 0; bottom: 0; right: 0; gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body or position: relative; container.Developer.mozilla.org: For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element』s containing block (what the element is positioned relative to).
- Giving the block a width or a height prevents the block from taking up all available space and forces the browser to calculate margin: auto based on the new bounding box. Developer.mozilla.org: The margin of the [absolutely positioned] element is then positioned inside these offsets.
- Since the block is absolutely positioned and therefore out of the normal flow, the browser gives equal values to margin-top and margin-bottomcentering the element in the bounds set earlier.W3.org: If none of the three [top, bottom, height] are 『auto』: If both 『margin-top』 and 『margin-bottom』 are 『auto』, solve the equation under the extra constraint that the two margins get equal values. AKA: center the block vertically
&
&