換行文字、圖片水平垂直居中完美解決方案

垂直居中是一個歷史悠久的大問題，要做到兼容所有瀏覽器少不了要花點時間，網上也流傳了很多解決方案，但沒發現比我現在用的方案更完美，至少在我的項目是如此。

項目中要用到垂直居中而碰到兼容性問題的，一般都是以下幾種情況：

1、換行文字垂直居中

2、圖片垂直居中

以上都是在固定寬高的容器里垂直居中，不然的話margin，padding便可實現。

解決垂直居中無非就從幾個方面入手，利用行高等於容器高度，模擬表格單元格特性，定位，css3的display:box

一、換行文字垂直居中

方法1：結合表格單元格特性和定位來實現

CSS代碼：

/*換行文字垂直居中*/
.vc-font1{border:1px solid black;width:200px;height:200px;display:table-cell;vertical-align:middle;text-align:center;}
/*兼容IE6、7*/
*+html .vc-font1{height:auto;min-height:200px;} 
.vc-font1 .vc-fix{*position:relative;*top:50%;*left:50%;*width:100%;} 
.vc-font1 .vc-inner{*position:relative;*top:-50%;*left:-50%;}

HTML代碼：

<div class="vc-font1">
    <div class="vc-fix"><span class="vc-inner">換行文字垂直居中，兼容所有瀏覽器</span></div>
</div>

PS：當文字高度超出容器時，識別table-cell的瀏覽器容器會自適應，此時容器的height屬性相當於min-height，為了達到所有瀏覽器效果一致，容器的height還要Hack一下

缺點：增加了多余的標簽

方法2：利用行內塊vertical-align:middle來實現

CSS代碼：

.vc-font2{border:1px solid black;width:200px;height:200px;text-align:center;overflow:hidden;}
.vc-font2 .vc-inner{display:inline-block;vertical-align:middle;}
.vc-font2 .vc-fix{display:inline-block;width:0;height:100%;line-height:100%;vertical-align:middle;visibility: hidden;}

HTML代碼：

<div class="vc-font2">
    <span class="vc-inner">換行文字垂直居中，兼容所有瀏覽器</span><span class="vc-fix"><!-- 此標簽不能換行 --></span>
</div>

PS：vc-inner和vc-fix必須是行內元素，vc-inner加上vc-fix的寬度不能超過容器寬度，行內塊換行時會多出空隙(容器font-size:0可去除，但這里不適用)，所以這兩個標簽不能換行

缺點：增加了多余的標簽(硬傷)，標簽不能換行且必須是行內元素

二、固定寬高圖片垂直居中

前面提到的換行文字垂直居中的方法對於固定寬高圖片垂直居中也是適用的

方法3：利用定位(原理跟方法1類似)

CSS代碼：

.vc-img1{border:1px solid black;width:200px;height:200px;position:relative;}
.vc-img1 img{width:100px;height:100px;position:absolute;top:50%;left:50%;margin:-50px 0 0 -50px;}

HTML代碼：

<div class="vc-img1">
    <img src="../../images/code.jpg" />
</div>

PS：既然已經確定了圖片的寬高，毫無疑問使用這種方法就沒有兼容性的問題出現了

缺點：圖片寬高必須固定，以便計算圖片margin的負值

方法4：行高等於容器高度

CSS代碼：

.vc-img2{border:1px solid black;width:200px;height:200px;line-height:200px;_font-size:200px;text-align:center;}
.vc-img2 img{width:100px;height:100px;vertical-align:middle;}
*+html .vc-img2{font-size:180px;}/*hack for ie7 字體要設置多大，自個慢慢調整*/

HTML代碼：

<div class="vc-img2"><img src="../../images/code.jpg" /></div>

PS：我以為設置了行高等於容器高度就完事了，依然還是碰到了問題，IE6不買賬沒效果，IE7也鬧別扭，在標簽同一行情況下失效。

缺點：感覺這樣寫不爽

三、圖片自適應容器寬高垂直居中

這個方法很簡單，就是在方法4的基礎上改一下圖片的寬高改成max-width,max-height，代碼如下：

.vc-img3{border:1px solid black;width:200px;height:200px;line-height:200px;text-align:center;}
.vc-img3 img{max-width:150px;max-height:150px;vertical-align:middle;}
*+html .vc-img3{font-size:180px;}/*hack for ie7 字體要設置多大，自個慢慢調整*

PS：很明顯這是不兼容IE6，要兼容IE6恐怕就要寫JS。對此，我只想說，讓IE6見鬼去吧！

最后給出一種高端大氣上檔次的方法，CSS3的display:box

.vc-css3{
    border:1px solid black;width:200px;height:200px;text-align:center;
    display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;
    display:-moz-box;-moz-box-align:center;-moz-box-pack:center;
    display:-o-box;-o-box-align:center;-o-box-pack:center;
    display:-ms-box;-ms-box-align:center;-ms-box-pack:center;
    display:box;box-align:center;box-pack:center;
}
.vc-css3 img{width:100px;height:100px;}

<div class="vc-css3">
    <img src="../../images/code.jpg" />
    <br>想居中就居中，爽啊！
</div>

很完美有木有？如果IE能支持的話，又是該死的IE...

查看效果 下載代碼

文章正文已結束，感謝閱讀。如果本文對您有所幫助，請點擊推薦一下。

如果對本文有何建議或疑問請留言或加群討論，前端開發交流群(75701468)

文章屬於原創，如需轉載請注明文章來源，不勝感激。

文章地址：http://www.cnblogs.com/leolai/p/3561084.html

蜂眾網,廣州蜂眾網,垂直居中,兼容瀏覽器