【總結】怎樣用css實現圖片垂直居中(兼容IE6/IE7)

圖片垂直居中(兼容各主流瀏覽器，含IE6/IE7)

1.利用table-cell實現居中，font-size做兼容兼容IE6+/FF/Chrome

優點：不添加任何多余標簽，兼容主流瀏覽器

<!--html結構-->
<div class="box-1"> <a class="img-wrap-1" href="#"> <img src="images/1.png" alt="" /> </a> </div> 

/* 樣式 */
.box-1{ display:table;} .img-wrap-1{ display:table-cell; width:200px; height:200px; border:1px solid #ccc; text-align:center; *font-size:178px; zoom:1; vertical-align:middle;} /* height與font-size之比大約為：1:0.893; zoom:1是為了觸發IE的hasLayout */ 

2.利用line-height實現居中兼容IE7+/FF/Chrome

優點：不需要任何hack，兼容IE7+主流瀏覽器
缺點：此方法不兼容IE6，當然也可以用方法1中的font-size來兼容IE6

<!--html結構-->
<div class="box-2"> <a class="img-wrap-2" href="#"> <img src="images/1.png" alt="" /> </a> </div> 

/* 樣式 */
.img-wrap-2{ display:inline-block; width:200px; height:200px; line-height:200px; border:1px solid #ccc; text-align:center;} .img-wrap-2 img{ vertical-align:middle;} 

3.利用button標簽實現居中兼容IE6+/FF/Chrome

優點：不需要任何hack，兼容IE6+主流瀏覽器
缺點：添加了多余的標簽button

<!--html結構-->
<div class="box-3"> <a class="img-wrap-3" href="http://baidu.com/" target="_blank"> <button disabled="disabled"><img src="images/1.png" alt="" /></button> </a> </div> 

/* 樣式 */
.box-3{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;} .img-wrap-3 button{ width:100%; height:100%; border:0; background:none;} .img-wrap-3 img{ cursor:pointer;} 

4.利用1px小圖片實現垂直居中兼容IE6+/FF/Chrome

優點：不需要任何hack，兼容IE6+主流瀏覽器
缺點：添加了多余的標簽img

 

<!--html結構-->
<div class="box-4"> <img class="blank" src="images/blank.gif" alt="" /> <a class="img-wrap-4" href="#" target="_blank"> <img src="images/1.png" alt="" /> </a> </div> 

/* 樣式 */
.box-4{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;} .blank{ width:0px; height:100%; vertical-align:middle;}

優劣對比：

1.利用table-cell實現居中，font-size做兼容兼容IE6+/FF/Chrome

優點：不添加任何多余標簽，兼容主流瀏覽器

缺點：需要計算處理font-size

2.利用line-height實現居中兼容IE7+/FF/Chrome

優點：不需要任何hack，兼容IE7+主流瀏覽器

缺點：此方法不兼容IE6，當然也可以用方法1中的font-size來兼容IE6

3.利用button標簽實現居中兼容IE6+/FF/Chrome

優點：不需要任何hack，兼容IE6+主流瀏覽器

缺點：添加了多余的標簽button

4.利用1px小圖片實現垂直居中兼容IE6+/FF/Chrome

優點：不需要任何hack，兼容IE6+主流瀏覽器

缺點：添加了多余的標簽img