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