在div中实现垂直居中的方法

 一、将div的line-height设置成为height相同的值。

<div id="div1" style="height:30px; line-height:30px;">

居中

</div>

但此做法对于IE6好象无效，而且div中只有一行的元素，如果有弟二行的话就会将div向下拉得很长。

 

二、用两个div达到效果。父div的display设为table，然后在子div中设置display为display:table-cell及vertical-align:middle

<div id="div1" style="display:table; width:300px; height:200px">

<div id="div2" style="display:table-cell; vertical-align:middle>

居中

</div>

</div>

 

三、设置div的padding值

<div id="div1" style="width:300px; height:30px; padding-top:20px; padding-bottom:20px>

居中

</div>

 

用过似乎第三种方法比较好用，因为没有一行元素的限制。