当前位置：首页 → 问答吧 → 1个不固定高度的div能在屏幕中实现垂直居中吗

1个不固定高度的div能在屏幕中实现垂直居中吗

时间：2010-09-10

来源：互联网

如题，注意body中只有一个div标签，没其他标签了，且不用js 能实现吗？求解。。昨天被bs了....

作者: ghjin 发布时间: 2010-09-10

只有一层很难控制，FF下的原理是转成table-cell，再设置vertical-align: middle垂直居中；
IE6/7下要用到定位，先让外层距上50%显示，再把内层负上本身高度的50%，这样就垂直居中了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>middle</title> <style> * { margin: 0; padding: 0; } body { background: #f0f0f0; font: normal 18px/1.5 Microsoft Yahei; } html, body { height: 100%; } .outer { width: 100%; height: 100%; background: #fff; display: table; *position: relative; } .middle { display: table-cell; vertical-align: middle; *position: absolute; *top: 50%; } .inner { width: 400px; margin: 0 auto; *position: relative; *top: -50%; } </style> </head> <body> <div class="outer"> <div class="middle"> <div class="inner">不固定高度垂直居中，文字再多一点。。。<br />这里是换行。<br />再多换几行测试。。<br />演示一下有没有问题</div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 lily0219 于 2010-9-10 17:15 编辑 ]

作者: lily0219 发布时间: 2010-09-10

那就是被人诓了，一层我也没搞出来，有两个层就好搞定了

作者: ghjin 发布时间: 2010-09-10