实现DIV层内的文字垂直居中
原文转自：http://www.cnblogs.com/justinfly/archive/2010/12/14/1893874.html
有时候，为了网页设计的美观，需要把div+css设计的页面里的某些div层里的文字垂直居中，包括多行文字以及单行文字；方法有不少，但真正能实现而代码又简洁的介绍不多，flymorn就为大家介绍几种适用的div文字垂直居中的方法。
首先要知道css里vertical-align无效，W3C官方对vertical-align做了下面的解释：“Thispropertyaffectstheverticalpositioninginsidealineboxoftheboxesgeneratedbyaninline-levelelement.”
实际上，一个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
<divid="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
<divid="div-a">
....
</div>
说明：如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”。
但是，如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法，在table外面再套上相应的div，
代码如下：
<table>
<tr><tdstyle="vertical-align:middle;height:300px;background-color:red">
</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)#FFFno-repeatcenter;
}
关键就是最后的center,这个参数定义图片的位置。还可以写成“topleft”(左上角)或者"bottomright"等，也可以直接写数值"5030"。