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

方法一：利用定位

HTML结构如：

复制代码代码如下:

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: middle\9;

/*在ie中，a标签中的img标签默认有蓝色边框*/

border: none\9;

}

方法二：

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;

font: 12px/1.5 tahoma,arial;

}

.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;

+line-height: 220px; /*设置ie7中空文本节点行高为220px*/

_font-family: sans-serif;

}

.pic-wrap img {

border: none;

vertical-align: middle\9; /*由于ie中有默认高度的空文本节点*/

}