对未知高度的图片设置垂直居中的方法详解

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法

但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。
方法一：

该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。
HTML代码
 

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

CSS代码
 

1. <style type="text/css">   
2. #box{   
3.     width:500px;height:400px;   
4.     display:table;   
5.     text-align:center;   
6.     border:1px solid #d3d3d3;background:#fff;   
7. }   
8. #box span{   
9.     display:table-cell;   
10.     vertical-align:middle;   
11. }   
12. #box img{   
13.     border:1px solid #ccc;   
14. }   
15. </style>   
16. <!--[if lte IE 7]>   
17. <style type="text/css">   
18. #box{   
19.     position:relative;   
20.     overflow:hidden;   
21. }   
22. #box span{   
23.     position:absolute;   
24.     left:50%;top:50%;   
25. }   
26. #box img{   
27.     position:relative;   
28.     left:-50%;top:-50%;   
29. }   
30. </style>   
31. <![endif]-->  

方法二：

方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的CSS Hack。
CSS代码

1. #box{   
2.     width:500px;height:400px;   
3.     overflow:hidden;   
4.     position:relative;   
5.     display:table-cell;   
6.     text-align:center;   
7.     vertical-align:middle;   
8.     border: