网页常见布局,图片在div中垂直居中,水平居中
div{text-align:center;border:1px solid #000;width:500px;height:500px;vertical-align:middle;display:table-cell;}
<div>
<img src="1.jpg">
</div>
这个vertical-align:middle;只适用于内联元素,如果想给div垂直、水平居中,则需要把div变设置为内联元素
<style type="text/css">
.wai{width:500px;height:500px;border:1px solid #000;text-align:center;vertical-align:middle;display:table-cell;}
.nei{background:#ccc;width:50px;height:50px;display:inline-block;}
</style>
<div class="wai">
<div class="nei"></div>
</div>