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

CSS代码
 

1.   
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.   
16.   

方法二：

方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的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:1px solid #d3d3d3;background:#fff;   
9. }   
10. #box span{   
11.     position:static;   
12.     *position:absolute;   
13.     top:50%;   
14. }   
15. #box img {   
16.     position:static;   
17.     *position:relative;   
18.     top:-50%;left:-50%;   
19.     border:1px solid #ccc;   
20. }  

该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在IE8下设置边框也无效。
方法三：

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

HTML代码