CSS控制图片在div里的垂直居中！

使用纯CSS实现未知尺寸的图片（像素500px）在正方形容器中水平和垂直居中。

[code lang="css"]
<style type="text/css">
.test { border:1px solid #ccc; height:500px; width:500px; text-align:center; margin:0 auto; background:#ccc;}
.test img{ vertical-align:middle; }
.test span{ height:100%; width:0; overflow:hidden; display:inline-block; vertical-align:middle; }
</style>
<div class="test"><img src="test.png"><span> </span></div>
[/code]