【CSS】综合案例

问题：

之前用的div标签（块），垂直居中设置一直无效

改用了img标签（行内块），再使用margin-top生效了

不明白

    <style>
        body {
            background-color: #f5f5f5;
        }
        .goods {
            width: 234px;
            height: 300px;
            background-color: #fff;
            margin: 0 auto;
            text-align: center;
        }
        #item1 {
            width: 160px;
            height: 160px;
            background-image: url(./cat.jpg);
            background-color: darkseagreen;
            background-position: center center;
            background-size: 120%;
            margin-top: 25px;
            margin-bottom: 25px;
        }
        #font1 {
            font-size: 14px;
            line-height: 25px;
        }
        #font2 {
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }
        #font3 {
            font-size: 14px;
            color: #ffa500;
        }
    </style>

    <div class="goods">
        <img id="item1"></img>
        <div id="font1">奶茶</div>
        <div id="font2">可爱小猫咪</div>
        <div id="font3">3岁</div>
    </div>