有時候，爲了網頁設計的美觀，需要把div+css設計的頁面裏的某些div層裏的文字垂直居中，包括多行文字以及單行文字；方法有不少，但真正能實現而代碼又簡潔的介紹不多，flymorn就爲大家介紹幾種適用的div文字垂直居中的方法。
首先要知道css裏vertical-align無效，W3C官方對vertical-align做了下面的解釋： “ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.”
實際上，一個Box中由很多行很多元素組成，vertical-align只作用於在同一行內的元素，它的垂直並不是相對於整個Box而言的。前面定義了一個60px的高度，但是這個Box中存在很多行，那段文本並不能對齊到中央。因此希望那段文本對齊中間，需要給它定義一個line-height的屬性，讓line-height爲60px，作用於一行的vertical-align就可以工作了。
如果是單行文字想垂直居中，只要保證div高和行高保持一致，就可以了。用下面的代碼即可實現：
CSS代碼：
#div-a{
height:60px;
line-height:60px;
}
XHTML代碼：
<div id="div-a">
飄易博客歡迎大家訪問@
</div>
如果還想讓div裏的文字水平居中，加上“text-align:center;”即可；代碼如下：
CSS代碼：
#div-a{
text-align:center;
height:60px;
line-height:60px;
}
XHTML代碼：
<div id="div-a">
飄易博客歡迎大家訪問@
</div>
說明：如果在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內的內容居中；對於IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。
但是，如果是多行文字，上面的垂直居中的方法就不行了，得用變通的方法實現；這裏建議使用table方法，在table外面再套上相應的div，代碼如下：
<table>
<tr><td style="vertical-align:middle;height:300px;background-color:red">
飄易博客<br />歡迎大家訪問@<br />www.piaoyi.org
</td></tr>
</table>
多行文字居中還有另外一種方法：
多行內容居中，且容器高度可變，也很簡單，給出一致的 padding-bottom 和 padding-top 就行：
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
優點：
1. 同時支持塊級和內聯極元素
2. 支持非文本內容
3. 支持所有瀏覽器
缺點：
容器不能固定高度（參考）
如何使圖片在DIV中垂直居中，可以用背景的方法。如下：
body{
BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;
}
關鍵就是最後的center,這個參數定義圖片的位置。還可以寫成“top left”(左上角)或者"bottom right"等，也可以直接寫數值"50 30"。