如何让div中的图片垂直居中

image.png

方法一：

给div设置text-align:center;可使图片水平居中；
给div设置 display: table-cell; vertical-align: middle;可使图片垂直居中

.box{
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .img{
        width: 80px;
        height: 80px;
    }

 <div class="box">
        <img src="../images/delicious.png" class="img">
    </div>

方法二：flex弹性布局

给div设置display: flex;
水平居中justify-content: center;
垂直居中align-items: center;

.box{
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .img{
        width: 80px;
        height: 80px;
    }
<div class="box">
        <img src="../images/delicious.png" class="img">
    </div>