前言：今天一個實習生問我，為什么他對圖片使用了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）