图片垂直居中

<p>在一些情况下，我们需要将图片在div中垂直居中，可是css只有水平居中，img的属性也没有垂直居中的，怎么解决呢？</p>
<p>在table中，图片、checkbox等元素都可以水平和垂直居中，如果不用table怎么办？那就用div模拟table了。给div样式设置display:table-cell，让div以table表格显示。but,这个主流浏览器可以，IE7就不行了。当然，IE7可以忽略了，要向前看嘛！有hack可以解决，但是就不说了。</p>
<p>换种方法，图文混排的时候图片和文字不能对齐，就从这里出发，给div样式，font-size:0px;vertical-align:middle;  div里出了img，还要放一个span标签，其他也行，让span的display为inline-block;height：50%；img给vertical-align:middle;图片和文字底线对齐，文字底线在div高度的一般，字体大小为0；因此就是垂直居中的。</p>
<p>代码：</p>

<style type="text/css">
body{font-family:Microsoft YaHei;font-size:14px;}
#box{width:300px;height:300px;background:#f8f8f8;box-shadow:0px 1px 1px #999999 inset;border:1px #CCCCCC solid;border-radius:-20px inset;text-align:center;vertical-align:middle;font-size:0;}
#box img{vertical-align:middle;}
#box span{display:inline-block;height:50%;}
</style>

<div id="box"><img src="images/star.png" width="100" height="100" style="border:1px #ccc solid;"/><span></span></div>