纯CSS 图片在DIV中垂直居中的显示方法

原理：利用vertical-align实现垂直，决定行高的是行内最高的元素的值。

css 属性：

div { height:600px; width:600px; text-align:center; }

span { height:100%; display:inline-block; vertical-align:middle; }

img { width:300px; height:300px;vertical-align:middle; }

html代码:

<div><span></span><img src="" /></div>

此方法很管用，我在各个项目里都有用到，呃，我们公司 Ie7 及以下不考虑，所以没有测试过低级浏览器的兼容性。

另外，span空标签即使设置的width=0、 font-size=0，在 firfox 、safari 等浏览器中依然占有3～5像素的空间，所以父级div 一定要留出至少5px的余地，才能保证图片完美垂直居中显示