DIV 的垂直居中

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是怎么起作用的，仍待研究。