html两张l图片居中代码,css实现的让图片垂直居中的方法

外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。常用于购物网站商品缩略图浏览。

方法一 (XHTML 1.0 transitional)：

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

HTML结构部分：

 

src="images/demo.jpg"

alt="">

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 #ccc;

}

方法二 (XHTML 1.0 transitional)：

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

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;

top:50%;

}

#box img {

position:static;

*position:relative;

top:-50%;left:-50%;

border:1px solid #ccc;

}

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

方法三 (XHTML 1.0 strict)：

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

HTML结构部分：

id="box">

src="images/demo.jpg"

alt="">

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 #ccc;

}

方法三也同样适用XHTML 1.0

transitional。以上方法都是收集于脚本之家，暂时只对这3个方法比较满意，兼容性方面不错，使用起来的限制也比较小，还有些方法我也都一一测试过，效果都不理想，在各浏览器中的差异比较大。

思考：很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中，也就是div来模拟table，如果CSS有一个属性来实现这种效果那该多好。如果你也有好的方法，欢迎你来分享。