div img 垂直居中

内容
内容
内容

CSS代码:

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

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='' />
    </div>
</div>