有時候，為了網頁設計的美觀，需要把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代碼：
|
1
2
3
4
|
#div-a{
height
:
60px
;
line-height
:
60px
;
}
|
XHTML代碼：
|
1
2
3
|
<
div
id="div-a">
......
</
div
>
|
如果還想讓div里的文字水平居中，加上“text-align:center;”即可；代碼如下：
CSS代碼：
|
1
2
3
4
5
|
#div-a{
text-align:center;
height:60px;
line-height:60px;
}
|
XHTML代碼：
|
1
2
3
4
|
<
div
id="div-a">
....
</
div
>
|
說明：如果在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內的內容居中；對於IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。
但是，如果是多行文字，上面的垂直居中的方法就不行了，得用變通的方法實現；這里建議使用table方法，在table外面再套上相應的div，
代碼如下：
|
1
2
3
4
|
<
table
>
<
tr
><
td
style="vertical-align:middle;height:300px;
</
td
></
tr
>
</
table
>
|
多行文字居中還有另外一種方法：
多行內容居中，且容器高度可變，也很簡單，給出一致的 padding-bottom 和 padding-top 就行：
|
1
2
3
4
5
|
.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}
|
優點：
1. 同時支持塊級和內聯極元素
2. 支持非文本內容
3. 支持所有瀏覽器
缺點：
容器不能固定高度
如何使圖片在DIV中垂直居中，可以用背景的方法。如下：
|
1
2
3
4
|
關鍵就是最后的center,這個參數定義圖片的位置。還可以寫成“top left”(左上角)或者"bottom right"等，也可以直接寫數值"50 30"。