div和图片垂直居中问题

未知高度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;
    }

2）

.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;
    }

4）

.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;
    }