CSS實現圖片在div a標簽中水平垂直居中

CSS實現圖片在div a標簽中水平垂直居中

<div class="demo">
　　<a href="#">
　　　　<img src="test.jpg" />
　　</a>
</div>


/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}
/*For IE7*/
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
/*For IE6*/
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?"200px":"auto");height:expression(this.height>140?"140px":"auto");}

 

 

 

一個簡潔的圖片垂直居中，不需要hack,不需要table-cell

HTML結構

 

<div id="imgwrap">
       <img src="http://jiedemo.sinaapp.com/img/240.jpg">
       <span></span>
</div>

 

 CSS

#imgwrap{ 
       width:300px;
       height:400px;
       background:#f00;
       line-height: 400px;
       text-align: center;
   }
#imgwrap img {vertical-align: middle;}
#imgwrap span{ display:inline-block;}