css图片水平、垂直居中方案

　　今天在前端需要将图片置于界面中央，苦苦搜寻，最终找到一个好用的CSS解决方案：

<div style="display: table;height: 100%; 100%;">
    <span style="display: table-cell;text-align: center;vertical-align: middle;">
        <img id="img" src="1.jpg">
    </span>
</div>

关键点：

父div设置display为table，子span设置display为table-cell后，text-align:center水平居中才有效，vertical-align:middle才有效。