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

.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下空文本节点有默认高度，所以设置*/  
}