1. 單行文字

可能很多人都知道如何讓單行文字垂直居中顯示，就是使用line-height，將line-height值與外部標(biāo)簽盒子的高度值設(shè)置成一致就可以了

2. 多行文字

說白了就是把文字當(dāng)圖片處理。用一個span標(biāo)簽將所有的文字封裝起來，設(shè)置文字與圖片相同的display屬性（inline-block屬性），然后用處理圖片垂直居中的方式處理文字的垂直居中，給外層容器添加table-cell和vertical屬性即可

3. 透明gif圖片+背景定位實現(xiàn)大小不定的圖片垂直居中

方法的原理很簡單，使用一個透明的gif圖片做覆蓋層，高寬拉伸至所需要的大小，然后給這個gif圖片一個background-position:center center的屬性。而background-image建議寫在頁面上，因為實際項目中，這肯定是個動態(tài)的URL地址，css文件似乎不支持動態(tài)URL地址

4. display:inline-block和文字大小控制居中

1.img外的標(biāo)簽需是a標(biāo)簽或span這類inline屬性的標(biāo)簽，div標(biāo)簽也可以，只不過需要轉(zhuǎn)成inline-block屬性

2.此方法只需要兩層標(biāo)簽即可，可謂代碼超簡潔，但是只適用于多圖垂直居中對齊的情況。因為其對齊原理是相鄰的圖片居中對齊，如果只是一個圖片，vertical-align:middle就只有與空格對齊了

5. 使用空白圖片實現(xiàn)垂直對齊

一句話，將要顯示的圖片與一張透明的高度100%，寬度1像素的透明圖片vertical-align:middle對齊

**其核心原理其實是將font-size設(shè)置得很大，目的是撐開IE下默認(rèn)文字空間的高度，然后通過vertical-align:middle屬性讓圖片與這個高高的空白空格空間垂直居中對齊；而這里將這個看不見的文字空間實例成一張透明的gif圖片，高度可以輕松設(shè)置為外部標(biāo)簽的高度，然后通過vertical-align:middle對齊，就實現(xiàn)效果了，在各個瀏覽器下都是一樣的表現(xiàn)，不需要擔(dān)心什么兼容性的問題。而且代碼很簡單，很易懂，想出錯都難！

相比圖片而言，多了個display:inline-block; 但是會少一次鏈接請求。效果圖和上面的一樣的，完美的水平垂直居中。原理也與圖片一樣，相信很容易理解的

總結(jié)

以上是生活随笔為你收集整理的大小不固定的图片和多行文字的垂直水平居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。