实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。前面定义了一个60px的高度，但是这个Box中存在很多行，那段文本并不能对齐到中央。因此希望那段文本对齐中间，需要给它定义一个line-height的属性，让line-height为60px，作用于一行的vertical-align就可以工作了。
如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了。用下面的代码即可实现：
| 代码如下 | 复制代码 |
|
CSS代码： #div-a{ height:60px; line-height:60px; } XHTML代码： |
|
如果还想让div里的文字水平居中，加上“text-align:center;”即可；代码如下：
| 代码如下 | 复制代码 |
|
CSS代码： #div-a{ XHTML代码： |
|
说明：如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”。
DIV中多行文字的垂直居中
3.1 利用Table使Div多行文字垂直居中
对于多行文字，上面的垂直居中的方法就不行了，可以在div里嵌套一个table，因为vertical-align:middle;对table的垂直居中是有效的。
<div>
| 代码如下 | 复制代码 |
| <table> <tr> <td style="vertical-align:middle;height:30px;"> div中利用table的vertical-align:middle;属性实现多行文字的垂直居中功能。 </td> </tr> </table> </div> |
|
3.2 利用Padding实现Div多行未知高度文字的垂直居中
对于多行文字，如果不考虑容器高度，则可以定义 padding-bottom 和 padding-top ，使上下的padding值相同，也能实现div多行文字的垂直居中。这是一种“看起来居中”的垂直居中方式，它只是使文字把<div>完全填充。这种实现方式的特点如下：
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不是固定高度
3.3 利用Display模拟Table实现div多行文字的垂直居中
CSS中有一个display属性能够模拟<table>，可以使用这个属性来让<div>模拟<table>，这样就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素。
| 代码如下 | 复制代码 |
|
//CSS代码 div #wrap { height:200px; display:table; } div #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:40px; } //Html代码 |
|
但是Internet Explorer 6 不支持display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。
Explorer 6中的垂直居中：
| 代码如下 | 复制代码 |
|
//CSS代码 div#wrap { border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative; } div#subwrap { position:absolute; border:1px solid #000; top:50%; } div#content { border:1px solid #000; position:relative; top:-50%; } //Html代码 |
|