css实现的让图片垂直居中的方法

<div id="box">
    <span><img src="images/demo.jpg" alt=""></span>
</div>

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #c;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;:50%;
}
#box img{
position:relative;
left:-50%;:-50%;
}
</style>
<![endif]-->

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
position:absolute; /针对IE6/7的Hack/
:50%; /针对IE6/7的Hack/
}
#box img {
position:static;
position:relative; /针对IE6/7的Hack/
:-50%;left:-50%; /针对IE6/7的Hack/
border:1px solid #c;
}
</style>

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #c;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
#box img {
    vertical-align:middle
    }
</style>
<![endif]-->