为什么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）