大小不固定的圖片和多行文字的垂直水平居中
一填硕、大小不固定滔驾，多行文字的垂直居中
① 單行文字
可能很多人都知道如何讓單行文字垂直居中顯示错森，就是使用line-height确垫，將line-height值與外部標(biāo)簽盒子的高度值設(shè)置成一致就可以了弓颈。例如：
單行文字居中顯示測試，css樣式為：height:3em; line-height:3em;……
② 多行文字
但是對于外框高度固定删掀，文字大小個數(shù)不固定的多行文字呢翔冀？文字可能一行顯示，也有可能多行顯示披泪；文字可能是小號字體纤子，也有可能是大號的。這時候如何讓其垂直居中顯示呢款票？看下面计福！
這里的文字用來做多行文字垂直居中對齊的測試。這是第二行文字徽职，您還可以再添加一行文字做測試象颖！這是隱藏的第三行文字，注意到文字的變化沒姆钉，依舊垂直居中说订。
上面所展示的就是多行文字垂直居中的效果抄瓦！
HTML結(jié)構(gòu)如下：
<div class="zxx_align_box_2"><span class="zxx_align_word">這里顯示多行文字。</span></div>
css代碼如下：
.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}.zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}
實(shí)現(xiàn)的原理：
說白了陶冷，就是把文字當(dāng)圖片處理钙姊。用一個span標(biāo)簽將所有的文字封裝起來，設(shè)置文字與圖片相同的display屬性（inline-block屬性）埂伦，然后用處理圖片垂直居中的方式處理文字的垂直居中即可煞额。有幾點(diǎn)簡要說明：1.此例子用em做單位，如果您對em單位了解不夠沾谜，把握不來的話膊毁，可以使用px做單位，值要換基跑；2.外部div不能使用浮動婚温；3.外部div高度和文字大小比例1.14為宜；4.內(nèi)部標(biāo)簽的vertical-align:middle可以省略媳否，但是外部div高度和文字大小比例要修改栅螟，我自己試了一下，高度比字體1.5左右的樣子篱竭；5.系統(tǒng)原因力图，我沒能夠在IE8下測試。
對于一些細(xì)化的原理掺逼，將在圖片垂直居中處講一下吃媒。
二、大小不固定坪圾，圖片的垂直居中
① 透明gif圖片+背景定位
這里利用了background-position:center實(shí)現(xiàn)圖片居中顯示晓折。這是個很實(shí)用也是很聰明的辦法，對于維護(hù)控制成本都很不錯兽泄。微軟必應(yīng)圖片搜索的圖片排列就是使用的這種方法漓概。
方法的原理很簡單，使用一個透明的gif圖片做覆蓋層病梢，高寬拉伸至所需要的大小胃珍，然后給這個gif圖片一個background-position:center center的屬性。而background-image建議寫在頁面上蜓陌，因?yàn)閷?shí)際項(xiàng)目中觅彰，這肯定是個動態(tài)的URL地址，css文件似乎不支持動態(tài)URL地址钮热。下面就是此方法的實(shí)例表現(xiàn)填抬。
HTML部分（僅示例一張圖片，其他重復(fù)隧期，故略）：
<ul class="zxx_align_box_3 fix"> <li>
css部分：
.zxx_align_box_3 li{width:1em; height:1em; padding:0.1em; margin:0 0.1em 0 0; font-size:128px; float:left; border:1px solid #beceeb;}.zxx_align_box_3 li img{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center;}
② display:table-cell和文字大小控制居中
據(jù)說這個方法是淘寶的工程師想到的飒责，確實(shí)是不錯的方法赘娄！但是下面展示的卻不是原版，而是我的修改版宏蛉，去掉了沒有必要的hack遣臼。
HTML部分（僅示例一張圖片，其他重復(fù)拾并，故略）：
<ul class="zxx_align_box_4 fix"> <li> <div>
css部分：
.zxx_align_box_4 li{float:left; margin-right:13px;}.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}.zxx_align_box_4 li div img{vertical-align:middle;}
需要說明的：
1.原版的代碼中有兩個hack揍堰，一個是針對文字大小的，另外一個是針對block屬性的嗅义；后經(jīng)過我測試推敲后證實(shí)這兩個hack都是多余的屏歹，而*display:block更是多余，因?yàn)镮E6,IE7根本就不認(rèn)識display:table-cell是誰芥喇！2.這個通過文字大小控制IE下圖片垂直居中是個很不錯的方法西采，要比使用position:relative這類高消耗的css方法要好多了凰萨。但是這個方法不足之處在于：不支持img外標(biāo)簽的浮動继控，所以當(dāng)多圖片顯示時需要再在外面嵌套一層標(biāo)簽——資源消耗多了！
3.高度：文字大小=1.14胖眷，這個比例我一直記著武通，但是后來我將這個比例的概念淡化了，原因在于多次遇到其他比例實(shí)現(xiàn)效果的情況珊搀。例如上面冶忱，就是1:1實(shí)現(xiàn)的。4.這個方法巧妙的應(yīng)用了IE默認(rèn)文字空間的概念境析，然而這個默認(rèn)文字空間是看不見囚枪，摸不著的，較抽象劳淆，不好理解链沼，使用者多記住用法，深層次原因不太理解沛鸵，不易上手括勺。但是，這里我要轉(zhuǎn)折一下曲掰，我想到了一種方法疾捍，將抽象默認(rèn)文字空間的概念具體出來，實(shí)現(xiàn)了更加容易理解栏妖，更加方便使用乱豆，更加利于維護(hù)的新方法，這就是最后一種方法吊趾。
③ display:inline-block和文字大小控制居中
這是我自己想到的方法宛裕，代碼相當(dāng)簡潔房官，是個成本很低，效果驚人的方法续滋，適用于多圖顯示的情況翰守。只需要一層必須要的a標(biāo)簽就解決問題了！
HTML部分（僅示例兩張圖片疲酌，其他重復(fù)蜡峰，故略）：
<div class="zxx_align_box_5 fix"> <a href="#zhangxinxu">
css部分：
.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}
需要說明的：
1.img外的標(biāo)簽需是a標(biāo)簽或span這類inline屬性的標(biāo)簽，div標(biāo)簽也可以朗恳，但是css代碼多些:display:inline; display:inline-block先變成inline屬性湿颅，再轉(zhuǎn)變成inline-block屬性，原因講起來又是一篇長長的文章粥诫，放著油航。2.此方法只需要兩層標(biāo)簽即可，可謂代碼超簡潔怀浆，但是只適用于多圖垂直居中對齊的情況谊囚。因?yàn)槠鋵R原理是相鄰的圖片居中對齊，如果只是一個圖片执赡，vertical-align:middle就只有與空格對齊了镰踏。
④ 使用空白圖片實(shí)現(xiàn)垂直對齊
好吧，我知道說大話會被人笑的沙合，但是我還是非常自信地推薦下面這種我想出來的圖片垂直居中對齊的方法奠伪。非常簡單，非常易懂首懈，出錯率低绊率，上手方便，兼容性上佳究履！
HTML部分（僅示例一張圖片滤否，其他重復(fù)，故略）：
<ul class="zxx_align_box_6 fix"> <li>
css部分：
.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}.zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}.zxx_align_box_6 li .show_img{vertical-align:middle;}
原理簡述：
一句話挎袜，將要顯示的圖片與一張透明的高度100%顽聂，寬度1像素的透明圖片vertical-align:middle對齊。其核心原理其實(shí)與第二種利用font-size大小實(shí)現(xiàn)IE下圖片垂直居中是一致的盯仪。將font-size設(shè)置得很大紊搪，目的是撐開IE下默認(rèn)文字空間的高度，其性質(zhì)類似于空格全景，然后通過vertical-align:middle屬性讓圖片與這個高高的空白空格空間垂直居中對齊耀石；而這里將這個看不見的文字空間實(shí)例成一張透明的gif圖片，高度可以輕松設(shè)置為外部標(biāo)簽的高度爸黄，然后通過vertical-align:middle對齊滞伟，就實(shí)現(xiàn)效果了揭鳞，在各個瀏覽器下都是一樣的表現(xiàn)，不需要擔(dān)心什么兼容性的問題梆奈。而且代碼很簡單野崇，很易懂，想出錯都難亩钟！
