西安網(wǎng)頁設計小編今天要給大家來解決的是未知多行文字如何實現(xiàn)垂直居中的問題，水平居中都好說text-aline：center，或者是margin：0 auto；但是你多行文字每行都不一樣就不知道如何居中了。

    如果一行文字很好解決行高就是它的高度，如果你不考慮IE6使用display來讓

模擬

就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設置在父元素上，后者必須設置在子元素上，因此我們要為需要定位的文本再增加一個

元素：

    大容器：display:table及整體高度；小內(nèi)容：vertical-align:middle;display:table-cell;

    不幸的是Internet Explorer 6 并不能正確地理解display:table和display:table-cell，因此這種方法在Internet Explorer 6及以下的版本中是無效的，還有的選擇定位，但是很多時候IE6經(jīng)常會碰到很多的問題，今天居中了，明天又不居中了，很多時候我們不常用定位的。往往完美的解決方案需要很長時間，但是也還是出現(xiàn)了.

#outer {height: 100%; overflow: hidden; position: relative;width: 100%;} #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;} /* for explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; position: static;} #inner {position: relative; top: -50%;margin: 0 auto;} /* for explorer only */ div.greenBorder {width:500px;height:584px;background:#333;} *+html #outer[id]{position: relative;} *+html #middle[id]{position: absolute; }

    以上代碼的優(yōu)點是沒有bug，采用了IE不支持的2選擇器 #value[id]。不過經(jīng)過了三層才實現(xiàn)居中，過程夠曲折的。

2選擇器#value[id]相當于選擇器#value，但是Internet Explorer不支持這種類型的選擇器。同樣地.value[class]，相當于.value,這些只有標準能讀懂。

    測試：1.5、Opera9.0、IE6.0、IE5.0通過。上面的代碼不支持IE7，還需要在最下面加二句：

    *+html #outer[id]{position: relative;}

    *+html #middle[id]{position: absolute; }