html网页中设置图片img标签垂直居中的代码

今天在实现wap版本的最代码发现logo图片通过css语法：vertical-align:middle;实现垂直居中，搜索了半天总结分享下靠谱的答案:

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
background-color: #29A7E1;
}
#box span{
display:table-cell;
vertical-align:middle;
}
</style>

1.使用table

<div id="box">
    <table width="100%" height="100%">
        <tr>
            <td align="center">
                <img src="http://static.zuidaima.com/resource/img/logo.png" />
            </td>
        </tr>
    </table>
</div>

2.使用display:table和display:talbe-cell

<div id="box">
  <span><img src="http://static.zuidaima.com/resource/img/logo.png" alt="" /></span>
</div>

效果如下图