DIV 的垂直居中

qingfeng825

div的垂直居中比Table要复杂的多，到目前为止，我还没有找到哪个css属性能直接就让div实现居中，比如我们所知道的vertical-align，它对于Table就能很简单的垂直居中，但直接用到div就不行。只有通过一些技巧来实现。

1，单行文本的实现，有几种方法，最简单的方法就是设置它的line-height和div的height相同就可以。

<div style="height:100px; line-height:100px; background:#CCCCCC">垂直居中文本</div>

2，对于多行文本，如果div的height是可伸缩的，则最简单的方法就是设置div的padding上下相等，它看起来就居中了。

<div style="background:#CCCCCC; padding:20px">
垂直居中文本<br />
垂直居中文本<br />
垂直居中文本
</div>

3，对于多行文本，而且div有固定height，也就是我们通常要求的垂直居中，就相对麻烦，下面贴一段网上搜的代码：
css部分：
div#main {   display:table;   background:#CCCCCC;   width:500px;   height:500px;   position:relative;   overflow:hidden;}div#min {   vertical-align:middle;   display:table-cell;   position:absolute;   top:50%;}div#content {   position:relative;   top:-50%;}div部分：
<div id="main">
<div id="min">
<div id="content">
垂直文本<br />
垂直文本<br />
垂直文本
</div></div></div>

这几种居中方法在效果上虽是实现了，但用起来总觉得不灵活，还有另一种不错的居中方法，在介绍expression使用方法中一个例子讲到。
我在程序中用到的是div在td元素中，其设置方法为：
 
<td  width="200" height="200"  nowrap >     <div  style='float:left;padding-top:3;padding-bottom:3;font-size:40px;background-color:red'>序号</div> </td>  
也就是通过padding-top、padding-bottom设置一个间隙，看起来DIV中的文字是垂直居中的。就我理解，DIV的高度是由padding-top+padding-bottom+font-size 来决定，只要他们加起来的和大于或等于TD的高度，则感觉上是居中的，但是事实上不是这样，只要设置了padding-top、padding-bottom不管你设置多高的TD，DIV都是居中的，而DIV的高度确实是由padding-top+padding-bottom+font-size 来决定.所以在CSS中,padding-top与padding-bottom是怎么起作用的，仍待研究。