爲何margin:0 auto不能用於inline-block元素

前言：今天一個實習生問我，爲何他對圖片使用了margin:0 auto，但圖片卻沒有居中，我讓他換成對父元素使用text-align:center便可。爲何margin:0 auto對圖片不起做用，這是之前入門的時候看《css權威指南》知道的，後來一直這麼用，忽然有點忘記爲何了。因而又去翻了下書，這裏分享下本身的理解。

塊級元素的水平屬性

塊級元素在水平方向上有7大屬性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。

• 這7大屬性的值加起來必須是元素包含塊的寬度（這一點記住，一會要考😁）。
• 這7個屬性中，只有3個屬性能夠設置爲auto：margin-left、width、margin-right，其他屬性必須設定爲特定的值，或者默認爲0.

Q: 延伸一下：爲何垂直方向上不能設置auto呢？ A: 我本身的理解是，由於目前的網頁是按照人的習慣來的，水平方向的最大寬度有所限制（爲包含塊的寬度），而垂直方向的高度根據內容的高度來定，且能夠一直延伸滾動；所以，水平方向有了最大值的限制，auto纔有意義，auto=總和-已知；而垂直方向上能夠無限延伸，此時若是要有的auto話，就是auto=無窮大-已知=無窮大，沒有意義。

爲何inline-block元素使用margin：0 auto不起做用

再次提到上面的考點，這7大屬性的值加起來必須是元素包含塊的寬度，這裏咱們假設其餘屬性均爲0，那也就是margin-left + width + margin-right = 包含塊的寬度。 因此：

• 對於塊級元素，當width固定後，margin就能經過margin = (包含塊的寬度 - width )/2得到取值
• 而對於inline-block元素（包含行內替換元素好比img等），內容的寬度就是最終的寬度，沒有margin-left + width + margin-right = 包含塊的寬度這一限制，因此當margin被設置爲auto時，它並不知道要取什麼值，就默認爲0了，這和爲何垂直方向上不能設置auto是同樣的道理。

小結

以上內容用一句話歸納就是，auto是基於總寬度-已知固定寬度得到取值的，inline-block元素水平方向的7大屬性沒有總寬度的限制，因此margin設置爲auto時，不知道如何取值，因此默認爲0，因而便沒有起到咱們想要的居中的效果。 （ps:對於auto在不一樣狀況下如何表現比較疑惑的話，能夠看看《css權威指南》的P171-P173）