css 图片垂直居中(兼容各主流浏览器，含IE6/IE7)
1.利用table-cell实现居中，font-size做兼容兼容IE6 /FF/Chrome
优点：不添加任何多余标签，兼容主流浏览器
| 代码如下 | 复制代码 |
| <!--html结构--> <div class="box-1"> <a class="img-wrap-1" href="#"> <img src="images/1.png" alt="" /> </a> </div> /* 样式 */ .box-1{ display:table;} .img-wrap-1{ display:table-cell; width:200px; height:200px; border:1px solid #ccc; text-align:center; *font-size:178px; zoom:1; vertical-align:middle;} /* height与font-size之比大约为：1:0.893; zoom:1是为了触发IE的hasLayout */ | |
2.利用line-height实现居中兼容IE7 /FF/Chrome
优点：不需要任何hack，兼容IE7 主流浏览器
缺点：此方法不兼容IE6，当然也可以用方法1中的font-size来兼容IE6
| 代码如下 | 复制代码 |
| <!--html结构--> <div class="box-2"> <a class="img-wrap-2" href="#"> <img src="images/1.png" alt="" /> </a> </div> /* 样式 */ .img-wrap-2{ display:inline-block; width:200px; height:200px; line-height:200px; border:1px solid #ccc; text-align:center;} .img-wrap-2 img{ vertical-align:middle;} | |
3.利用button标签实现居中兼容IE6 /FF/Chrome
优点：不需要任何hack，兼容IE6 主流浏览器
缺点：添加了多余的标签button
| 代码如下 | 复制代码 |
| <!--html结构--> <div class="box-3"> <a class="img-wrap-3" href="http://www.111cn.net/" target="_blank"> <button disabled="disabled"><img src="images/1.png" alt="" /></button> </a> </div> /* 样式 */ .box-3{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;} .img-wrap-3 button{ width:100%; height:100%; border:0; background:none;} .img-wrap-3 img{ cursor:pointer;} | |
4.利用1px小图片实现垂直居中兼容IE6 /FF/Chrome
优点：不需要任何hack，兼容IE6 主流浏览器
缺点：添加了多余的标签img
| 代码如下 | 复制代码 |
| <!--html结构--> <div class="box-4"> <img class="blank" src="images/blank.gif" alt="" /> <a class="img-wrap-4" href="#" target="_blank"> <img src="images/1.png" alt="" /> </a> </div> /* 样式 */ .box-4{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;} .blank{ width:0px; height:100%; vertical-align:middle;} | |
当然，垂直居中的方法不止以上几种，但目前较常用的也就这几个，而且兼容性比较好，后面若发现更好的方法再进行补充
您可能感兴趣的文章：
css 图片垂直居中(兼容各主流浏览器，含IE6/IE7)
css 图片水平垂直居中实例小结
DIV实现input输入框垂直居中示例(兼容IE8、Firefox、Safari)
css中元素水平垂直居中4种方法介绍
Css未知高度图片垂直居中实例
CSS中未知高度水平垂直居中实例
Css实现图片垂直上下左右居中显示
css里的!important意思？
css实现透明度兼容IE, Firefox, Chrome, Safari代码
IE7,IE8浏览器CSS实现正圆角效果代码