完美實現文字圖片水平垂直居中

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

項目中要用到垂直居中而碰到兼容性問題的，通常都是如下幾種狀況：

1. 換行文字垂直居中

2. 圖片垂直居中

以上都是在固定寬高的容器裏垂直居中，否則的話margin，padding即可實現。

解決垂直居中無非就從幾個方面入手

1. 利用行高等於容器高度

2. 模擬表格單元格特性

3. 定位佈局

4. css3的display:box

換行文字垂直居中

結合表格單元格特性和定位來實現

/* 換行文字垂直居中 */
.vc-font1 {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/* 兼容IE六、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%;
}

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

當文字高度超出容器時，識別table-cell的瀏覽器容器會自適應，此時容器的height屬性至關於min-height，爲了達到全部瀏覽器效果一致，容器的height還要Hack一下。

缺點：增長了多餘的標籤

利用行內塊vertical-align:middle來實現

.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;
}

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

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

缺點：增長了多餘的標籤(硬傷)，標籤不能換行且必須是行內元素。

固定寬高圖片垂直居中

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

利用定位(原理跟方法1相似)

.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;
}

<div class="vc-img1">
    <img src="http://fpoimg.com/50x50" />
</div>

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

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

行高等於容器高度

.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;
}

/*hack for ie7 字體要設置多大，自個慢慢調整*/
*+html .vc-img2 {
    font-size: 180px;
}

<div class="vc-img2">
    <img src="http://fpoimg.com/50x50" />
</div>

我覺得設置了行高等於容器高度就完事了，依然仍是碰到了問題，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;
}

/*hack for ie7 字體要設置多大，自個慢慢調整*/
*+html .vc-img3 {
    font-size: 180px;
}

很明顯這是不兼容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="http://fpoimg.com/50x50" />
    <br>想居中就居中，爽啊！
</div>

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

文章轉自《換行文字、圖片水平垂直居中完美解決方案》