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

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

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

关键点：

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

posted @ 2021-08-06 18:05  光何  阅读(245)  评论(0)  编辑  收藏  举报