解决CSS图片垂直居中

 CSS图片垂直居中问题：

在浏览器下图片不能垂直居中，以下就是完美解决图片垂直居中问题。

HTML结构如：

 

< div  class = "box" >

     < a  class = "pic-wrap"  href = "#"  target = "_blank" >

         < img  src="http://www.si27.com/upload/timetable/1364956490.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 ;

}

.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中有默认高度的空文本节点*/

}