为何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）