div和图片垂直居中问题

<div class="wrap">
<div class="test">sdfdsfdsf<br>sadsad</div>
</div>

1）.wrap {
width: 300px;
height: 300px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
}
.wrap:after{
display:inline-block;
content: '';
vertical-align: middle;
height: 100%;
}
.test {
background: red;
display: inline-block;
vertical-align: middle;
}

.wrap {
width: 300px;
height: 300px;
position: relative;
background: rgba(0, 0, 0, 0.5);
}
.test{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background: red;
}

3）.wrap {
width: 300px;
height: 300px;
display: table-cell;
background: rgba(0, 0, 0, 0.5);
vertical-align: middle;
text-align: center;
}
.test{
display: inline-block;
background: red;
}

.wrap {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
vertical-align: middle;
text-align: center;
}
.test{
background: red;
}

<div class="wrap">
<img src="appicon.png" class="test">
</div>

.wrap{
        width: 300px;  
        height: 160px;   
        background: rgba(0, 0, 0, 0.5);  
        text-align: center;  
    }
    .wrap:after{
        content: "";
        height: 100%;
        vertical-align: middle;
        display: inline-block;
    }
    img{
        vertical-align: middle;
    }