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

     </div>  
    </div>    
   </li>  
   <li>  
    <div class="table">  
     <div class="tableCell">  
      <a href="#" class="imgBox"><img src="images/img2.jpg" alt="" /></a>  
     </div>  
    </div>    
   </li>  
   <li>  
    <div class="table">  
     <div class="tableCell">  
      <a href="#" class="imgBox"><img src="images/img3.jpg" alt="" /></a>  
     </div>  
    </div>    
   </li>  
   <li>  
    <div class="table">  
     <div class="tableCell">  
      <a href="#" class="imgBox"><img src="images/img4.jpg" alt="" /></a>  
     </div>  
    </div>    
   </li>  
  </ul>   

  
CSS Code

CSS Code复制内容到剪贴板

.imgWrap li {   
 background: #ffa url(images/gridBg.gif) repeat center;   
 width: 219px;   
 height: 219px;   
 float: left;   
 border: solid 1px #666;   
 margin: 10px 10px 0 0;   
 list-style: none;   
 text-align: center;   
}   
.table {   
 width: 100%;   
 height: 100%;   
 display: table;   
 position: relative;   
}     
  
.tableCell {       
 display: table-cell;   
 vertical-align: middle;   
 text-align: center;      
 padding: 10px;