為什麼「margin:auto」可以讓塊級元素水平居中？

2、absolute元素在具體寬高容器中垂直水平居中對齊。

詳細的計算規則看標準：http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

以上兩種場景，有一條規則是一樣的，無論垂直還是水平方向，margin有節餘同時對應方向設置了auto,相應方向計算出的margin是分半的（第一種垂直方向除外，why？標準規定！）。

這個是轉自 @杜瑤 大神的博客（他也回答了 ，我就當幫他做個宣傳吧O(∩_∩)O~） ，這位大神寫了好多關於margin的使用技巧，我想下面這段可以解決樓主的問題吧~

正文開始

auto是margin的可選值之一。相信大家平時使用auto值時，最多的用法大概是 margin: 0 auto; 和 margin: auto;，恩，是的，塊元素水平居中。讓我們來看看代碼實現：

#demo{
width: 500px;
margin: auto; /* 或者 margin: 0 auto; */
}


HTML:

&
&

恩，我就是那個需要水平居中的傢伙。& &

為了更明顯點，我們來看個例子：margin實現塊元素水平居中。Cool，這麼簡單就實現了水平居中。

不過你可能也發現了不論是 margin: auto; 還是 margin: 0 auto; 效果都是一樣的，都是讓 #demo 水平居中了，但縱向並沒有任何變化。

大家都知道 margin 是複合屬性，也就是說 margin: auto; 其實相當於 margin: auto auto auto auto;，margin: 0 auto;相當於 margin: 0 auto 0 auto;，四個值分別對應上右下左。至於CSS中的上、右、下、左順序就不做贅述了。

根據規範，margin-top: auto; 和 margin-bottom: auto;，其計算值為0。這也就解釋了為什麼 margin: auto; 等同於 margin: 0 auto;。但僅此而已嗎？讓我們來看看規範描述：

原文：On the A edge and C edge, the used value of 『auto』 is 0.

翻譯：如果場景是A和C，那麼其 auto 計算值為 0。

更詳細請參閱：margin properties

由此可見，它們還與書寫模式 writing-mode 和 文檔流方向 direction 有關。所以我們說 margin: auto; 等同於 margin: 0 auto; 是不太精準的，因為還有前置條件。

了解這些很重要，這有助於理解 margin 屬性的設計意圖。

OK，聊了這麼多，我們回到默認的 writing-mode: horizontal-tb; 和 direction: ltr; 的情況繼續往下，後面的話題都基於這個前提。

這是因為水平方向的 auto，其計算值取決於可用空間（剩餘空間）。

原文：On the B edge and D edge, the used value depends on the available space.

翻譯：如果場景是B和D，那麼其 auto 計算值取決於可用空間。

CSS權威指南-chapter 7裡面有說到：

&> 正常流中的塊級元素框的水平總和就等於父元素的width

因此， 只要我們設置了block element的width, 並且margin-leftauto; margin-right: auto; 就可以讓block element水平居中。

但是， 對於垂直格式化是不行的。

以下答案並不是針對問題的回答

好像沒有人提到一種使 margin:auto; 能垂直水平居中的方法，還是說一下吧，萬一能幫到一些人

父元素: {
display: flex;
}
子元素: {
flex: 0 0 auto;
margin: auto;
}


就這樣。