大小不固定的图片、多行文字的水平垂直居中实现方法

补充：我后来又测试了一下，结果在IE8浏览器和Opera浏览器下是不垂直居中的，所有此方法还是有待商榷的）。下为在IE7下的效果截图：

此方法原理是，在IE下使用font-size使图片垂直居中显示，Firefox，chrome等现代浏览器使用line-height配合img本身的vertical-align属性使垂直居中显示，由于两者不冲突，所以没有hack就实现的效果。css代码简洁明了，关键是HTML代码非常清晰，一层外标签，里面就是img标签，我想很难再找出比这个方法更出色的让图片水平垂直居中的方法了。好吧，其实这个方法是有一点不完美的，就是opera浏览器下图片无法垂直居中显示，幸好国内而言，使用opera浏览器的比例很低，所以综合来讲这个方法是个非常优秀的图片水平垂直居中的方法。

以下为css代码部分：

复制代码.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; font-size:125px;} .zxx_ul_image li img{vertical-align:middle;}

可以看到，代码非常简洁易懂，HTML部分代码就不上了，您可以单击下面的demo，里面有HTML代码的展示以及效果的预览。