使用css实现文本垂直居中,对于支持display: table的浏览器来说,是比较容易实现的,只需要对外层div设置为table,内层div设置为table-cell,并设置文本垂直居中即可。但对于IE6/7,并不支持display:table,只能改用定位的方式来处理。外层div给一个定位,中间层div相对外层绝对定位,top为50%,内层span相对定位,top为-50%,通过正负50%的定位,使内容垂直居中。
相关演示代码(不管怎么改变div1的高度,都可以保证内容垂直居中,内容不限行数):
<!DOCTYPE HTML> <html> <head> <title>ie中垂直居中</title> <meta charset=UTF-8"> <style type="text/css"> .div1{ width:300px; position:absolute; border:1px solid #000; top:100px; left:200px; display:table; } .div2{ display:table-cell; vertical-align:middle; *position:absolute; *top:50%; } span{ *position:relative; *top:-50%; } </style> </head> <body> <div class="div1" style="height:200px"> <div class="div2"> <span>IE6/7使用定位关系来垂直居中,IE8/9使用display:table和display:table-cell</span> </div> </div> </body> </html>