CSS图片垂直居中实现方法详解

方法一：利用定位 HTML结构如：复制代码代码如下: <div class="box"> <a class="pic-wrap" href="#" target="_blank"> <img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png"> </a> </div> CSS代码如：复制代码代码如下: body { margin: 0; padding: 0; font: 12px/1.5 tahoma,arial; } .box { width: 220px; height: 220px; border: 1px solid #F30; margin: 100px auto 0; display: table; } .pic-wrap { display: table-cell; text-align: center; vertical-align: middle; } /*主要针对IE6、7的hack*/ .box { *position: relative; } .pic-wrap { *width: 100%; *position: absolute; *top: 50%; *left: 0; /*继承自body的字体会影响到ie6，设置默认的windows系统字体*/ _font-family: sans-serif; } .pic-wrap img { *position: relative; *top: -50%; *left: 0; /*在ie中空文本节点有默认高度*/ vertical-align: middle9; /*在ie中，a标签中的img标签默认有蓝色边框*/ border: none9; } 方法二： HTML结构同上； CSS代码如：复制代码代码如下: .box { width: 220px; height: 220px; border: 1px solid #F30; margin: 100px auto 0; } .pic-wrap { display: table-cell; vertical-align: middle; width: 220px; height: 220px; text-align: center; /*ie6、7不支持display:table-cell*/ *display: block; *font-size: 192px; /*字体大小为height*0.783或者height/1.14,这里约为192px*/ _font-family: sans-serif; /*设置字体，否则在ie6下会有一个像素的偏差*/ } .pic-wrap img { border: none; vertical-align: middle; /*由于ie下空文本节点有默认高度，所以设置*/ } 【注意，当在css中设置了body元素字体的话，那么方法二在ie7下会失效的】最佳方法： CSS代码如：复制代码代码如下: body { margin: 0; padding: 0; <SPAN style="COLOR: #ff6600">font: 12px/1.5 tahoma,arial;</SPAN> } .box { width: 220px; height: 220px; border: 1px solid #F30; margin: 100px auto 0; } .pic-wrap { display: table-cell; vertical-align: middle; width: 220px; height: 220px; text-align: center; /*ie6、7不支持display:table-cell*/ *display: block; _font-size: 192px; <SPAN style="COLOR: #ff6600">+line-height: 220px; /*设置ie7中空文本节点行高为220px*/</SPAN> _font-family: sans-serif; } .pic-wrap img { border: none; vertical-align: middle9; /*由于ie中有默认高度的空文本节点*/ }

　　推荐阅读

　　对网页中层的固定实现代码

对于DIV+CSS不熟悉的我，为此加班加点在项目上线时把问题解决了。参考代码如下：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>>>详细阅读

本文标题：CSS图片垂直居中实现方法详解

地址：http://www.17bianji.com/kaifa2/CSS/16511.html

1/2 1