Ø 前言
寫 html + css 時，img 標簽的垂直與水平居中，應該是很常見的設計。實現的方式很多，但是容易遺忘，下面分別整理了幾種實現方式。
1. css 代碼
<style type="text/css">
p, img{
margin: 0px;
}
#div1{
width: 600px;
/*border: 1px solid blue;*/
margin: 0px auto;
}
.interior{
width: 100%;
height: 120px;
border: 1px solid purple;
margin-bottom: 5px;
}
.interior img{
width: 100px;
height: 100px;
border: 1px solid orange;
}
#div1_1{
text-align: center;
line-height: 118px;
}
#div1_1 img{
display: inline-block;
vertical-align: middle;
}
#div1_2{
text-align: center;
display: table;
}
#div1_2 span{
display: table-cell;
vertical-align: middle;
}
#div1_3{
position: relative;
text-align: center;
}
#div1_3 img{
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
#div1_4 {
text-align: center;
}
#div1_4 img {
position: relative;
top: 9px;
}
</style>
2. html 代碼
<div id="div1">
<p>方式1. 使用</p>
<p>div: text-align: center; line-height: 150px;</p>
<p>img：display: inline-block; vertical-align: middle;</p>
<div id="div1_1" class="interior">
<img src="../../../../Images/20170319161233408.jpg" />
</div>
<p>缺點：<p>
<p>1. 需要父 div 定義 text-align: center; 這樣如果有其他元素也會同樣水平居中。</p>
</br>
<p>方式2. 使用</p>
<p>div: text-align: center; display: table;</p>
<p>span: table-cell; vertical-align: middle;</p>
<div id="div1_2" class="interior">
<span>
<img src="../../../../Images/20170319161233408.jpg" />
</span>
</div>
<p>缺點：<p>
<p>1. 需要父 div 定義 text-align: center; 這樣如果有其他元素也會同樣水平居中。</p>
<p>2. 而且需要使用 span 標簽將 img 標簽包裹。</p>
</br>
<p>方式3. 使用絕對定位 img</p>
<p>div: position: relative;</p>
<p>img：position: absolute; left:50%; top: 50%; margin-left: -50px; margin-top: -50px;</p>
<div id="div1_3" class="interior">
<img src="../../../../Images/20170319161233408.jpg" />
<span>span 1 span 1 span 1</span>
</div>
<p>缺點：<p>
<p>1. 如果內部有其他元素時，都水平垂直居中，會被 img 遮蓋。</p>
</br>
<p>方式4. 使用相對定位 img</p>
<p>div: text-align: center;</p>
<p>img：position: relative; top: 9px;</p>
<div id="div1_4" class="interior">
<img src="../../../../Images/20170319161233408.jpg" />
<span>span 1 span 1 span 1</span>
</div>
<p>缺點：<p>
<p>1. 需要父 div 定義 text-align: center; 這樣如果有其他元素也會同樣水平居中。</p>
<p>2. 必須知道父 div 的高度，自行調整 top 值，在高度不確定的情況下就不能使用了。</p>
</div>
3. 運行效果
Ø 總結
1. 其實方式1、2、3 都並沒有真正的垂直居中，仔細觀察會發現，不是上邊距比下邊距高了幾px，就是下邊距比上邊距高了幾px。是否有其他方式可以解決呢？
2. 如果在父 div 高度確定的情況下，方式4是比較可取的，瀏覽器兼容也挺好。
3. 參考鏈接：http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html