CSS解决页面图片水平垂直居中问题的方法

 }   
 .imgWrap a {   
  background: #ffa url(images/gridBg.gif) repeat center;   
  width: 219px;   
  height: 219px;   
  display: table-cell;/*图片容器以表格的单元格形式显示*/  
  text-align: center; /* 实现水平居中 */  
  vertical-align: middle; /*实现垂直居中*/        
 }   
 .imgWrap a:hover {   
  background-color: #dfd;   
 }   
 .imgWrap img {   
  border: solid 1px #66f;   
  vertical-align: middle; /*图片垂直居中*/  
 }   
 </style>   
 <!–下面是解决IE6-7的正常显示的代码–>   
 <!–[if lt IE 8]>   
  <style type="text/css">   
  .imgWrap a {   
   display: block;   
  }   
  .imgWrap span {   
   display: inline-block;   
   vertical-align: middle;   
   height: 100%;   
  }   
  .imgWrap {   
   _height: 0;   
   zoom: 1;   
  }   
  </style>   
 <![endif]–>  

  
效果

2、空白标签实现图片的垂直居中

这种方法很有意思，也很有独特之处，兼容各浏览器，代码较第一种方法又简单很多，最主要的不要单独给IE写效果，而且易懂，下面一起看看这种方法吧。
HTML Markup

XML/HTML Code复制内容到剪贴板

<ul class="imgWrap clearfix">  
 <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>  
 <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>  
 <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>