網頁常見佈局，讓圖片在div中，垂直居中，水平居中

網頁常見佈局，圖片在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>