之前在製作一個搶購盒子的時候遇到了一個問題：

我將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的用法