之前在制作一个抢购盒子的时候遇到了一个问题：

我将img放到父盒子内的时候，想让img在父盒子内居中对齐，代码如下：

HTML：
<div class="hot">
        <img src="img/QQ截图20210713104649.jpg" alt="iPhone">
</div>

CSS：
.hot {
    margin: 100px auto;
    width: 320px;
    height: 475px;
}

.hot img {
    margin: 20px auto 35px;
    width: 247px;
    display: inline-block;
}

发现盒子无法父系居中。改成display: block后可以居中。

查询原因：根据网上说法

无论img是行内还是块级，margin-left/right都应该起作用，而top/bottom不起作用，但是相反的是，我使用inline-block时，上下起作用，左右不起作用。

inline-block下，上下起作用，左右不起作用：

block下，上下左右都起作用：

我再把margin: auto自定义后，发现其实inline-block上下左右也是起作用的

这就让我仔细研究了一下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，于是便没有起到我们想要的居中的效果。

css里display:inline/block/inline-block的区别