圖片垂直居中

<img src ="..." alt="" >

　　html標簽分三種

• block：塊級元素（div）多個div會換行顯示，可以設置寬高；
• inline：行內元素（span）多個span會在一行顯示，不能設置寬高；
• inline-block：行內塊元素（img）多個img會在同一行顯示，可以設置寬高。

圖片垂直居中1：

<style type="text/css">
	div{width: 300px;height: 300px; border: 1px solid black;text-align: center;line-height: 300px;}
</style>

<div>
    <img src="#" alt="" >
</div>

圖片垂直居中2：

<style type="text/css">
　　div{width: 300px;height: 300px; border: 1px solid black;text-align: center;}
　　span{display: inline-block;width: 0;height: 100%;vertical-align: middle;}
　　img{vertical-align: middle;}
</style>
<div>
　　<span></span>
　　<img src="1230.jpg" alt="">
</div>

　　span設置行內塊元素等於放了兩個img；

　　如果兩個img都加了vertical-align=center，那么雙方就對齊了垂直方向的中間位置，其中一個height=100%占滿盒子，另外一個會垂直方向居中。

vertical-align=middle;