完美實(shí)現(xiàn)文字圖片水平垂直居中

張憲坤發(fā)布于2019-08-28 18:27 / 2683人閱讀

摘要：想居中就居中，爽啊很完美有木有如果能支持的話，又是該死的文章轉(zhuǎn)自換行文字圖片水平垂直居中完美解決方案

垂直居中是一個(gè)歷史悠久的大問(wèn)題，要做到兼容所有瀏覽器少不了要花點(diǎn)時(shí)間，網(wǎng)上也流傳了很多解決方案，但沒(méi)發(fā)現(xiàn)比我現(xiàn)在用的方案更完美，至少在我的項(xiàng)目是如此。

項(xiàng)目中要用到垂直居中而碰到兼容性問(wèn)題的，一般都是以下幾種情況：

換行文字垂直居中

圖片垂直居中

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

解決垂直居中無(wú)非就從幾個(gè)方面入手

利用行高等于容器高度

模擬表格單元格特性

定位布局

css3的display:box

換行文字垂直居中 結(jié)合表格單元格特性和定位來(lái)實(shí)現(xiàn)

/* 換行文字垂直居中 */
.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%;
}


    換行文字垂直居中，兼容所有瀏覽器

當(dāng)文字高度超出容器時(shí)，識(shí)別table-cell的瀏覽器容器會(huì)自適應(yīng)，此時(shí)容器的height屬性相當(dāng)于min-height，為了達(dá)到所有瀏覽器效果一致，容器的height還要Hack一下。

缺點(diǎn)：增加了多余的標(biāo)簽

利用行內(nèi)塊vertical-align:middle來(lái)實(shí)現(xiàn)

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


    換行文字垂直居中，兼容所有瀏覽器

vc-inner和vc-fix必須是行內(nèi)元素，vc-inner加上vc-fix的寬度不能超過(guò)容器寬度，行內(nèi)塊換行時(shí)會(huì)多出空隙(容器font-size: 0可去除，但這里不適用)，所以這兩個(gè)標(biāo)簽不能換行。

缺點(diǎn)：增加了多余的標(biāo)簽(硬傷)，標(biāo)簽不能換行且必須是行內(nèi)元素。

固定寬高圖片垂直居中

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

利用定位(原理跟方法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;
}

既然已經(jīng)確定了圖片的寬高，毫無(wú)疑問(wèn)使用這種方法就沒(méi)有兼容性的問(wèn)題出現(xiàn)了

缺點(diǎn)：圖片寬高必須固定，以便計(jì)算圖片margin的負(fù)值。

行高等于容器高度

.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 字體要設(shè)置多大，自個(gè)慢慢調(diào)整*/
*+html .vc-img2 {
    font-size: 180px;
}

我以為設(shè)置了行高等于容器高度就完事了，依然還是碰到了問(wèn)題，IE6不買(mǎi)賬沒(méi)效果，IE7也鬧別扭，在標(biāo)簽同一行情況下失效。

這里順便推薦一個(gè)很好用的占位圖網(wǎng)站，好奇的童鞋猛戳鏈接吧 ：）

缺點(diǎn)：感覺(jué)這樣寫(xiě)不爽

圖片自適應(yīng)容器寬高垂直居中

這個(gè)方法很簡(jiǎn)單，就是在方法4的基礎(chǔ)上改一下圖片的寬高改成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 字體要設(shè)置多大，自個(gè)慢慢調(diào)整*/
*+html .vc-img3 {
    font-size: 180px;
}

很明顯這是不兼容IE6，要兼容IE6恐怕就要寫(xiě)JS。對(duì)此，我只想說(shuō)，讓IE6見(jiàn)鬼去吧！

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


    
    
想居中就居中，爽啊！

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

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