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