为什么margin:0 auto不能用于inline-block元素

块级元素的水平属性
块级元素在水平方向上有7大属性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。

这7大属性的值加起来必须是元素包含块的宽度（这一点记住，一会要考😁）。
这7个属性中，只有3个属性可以设置为auto：margin-left、width、margin-right，其余属性必须设定为特定的值，或者默认为0.

为什么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是一样的道理。

啥意思？？
看一个小例子

仅设置margin-left


不管margin如何设置，元素占的宽度永远是固定值。

而

宽度对于css来说无法获取。所以margin: 0 auto;就失效了

小结
以上内容用一句话概括就是，auto是基于总宽度-已知固定宽度获得取值的，inline-block元素水平方向的7大属性没有总宽度的限制，所以margin设置为auto时，不知道如何取值，所以默认为0，于是便没有起到我们想要的居中的效果。
（ps:对于auto在不同情况下如何表现比较疑惑的话，可以看看《css权威指南》的P171-P173）

参考文章:https://www.cnblogs.com/youhong/p/11135242.html