div中内容和img垂直居中方法

<style>
.box{
    width:300px;
    height:300px;
    text-align:center;
    position:relative;
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
}
.box .mid{
    width:300px;
    position:static;
      +position:absolute;
      top:50%;
    left:0;
    text-align:center;
}
.box .inner{
    position:static;
    +position:relative;
    top:-50%;
    vertical-align:middle;
}
</style>


<div class="box" style="border:1px solid blue;">
    <div class="mid">
       <div class="inner" style="border:1px solid red;">
                垂直居<br />垂直居中<br />垂直居中
        </div>
    </div>
</div>
    
<div class="box" style="border:1px solid blue;">
    <div class="mid">
        <img class='inner' src="images/nav2.png"/>
    </div>
</div>