有时我们在设计网页时需要在屏幕中间放一个div层,并且让他在不管窗口大小的情况下,总是浮动在屏幕中间.
让div 在水平居中,很容易实现,margin:0 auto;就可以搞定了.
但要让他垂直居中,却是个让和我一样的菜鸟们头痛的一个地方
以下这个方法是我在遇到这个问题时在网上找到的一个方法,很强.
使用这个方法,你必须设定你屏幕中间的这个div的宽和高.
| 以下为引用的内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { position:absolute; //绝对定位 top:50%; //距顶部50% left:50%; margin:-100px 0 0 -200px; //设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.(感觉在绕口令) width:400px; //宽为400,那么margin-top为-200px height:200px; //高为200那么margin-left为-100px; border:1px solid red; line-height:200px; font-size:16px; text-align:center; z-index:99; //浮动在最上层 } --> </style> <div>欢迎光临php程序员站www.phperz.com</div> |
不知道你搞懂了没,关键处在于top和left分别为50%, margin和top 和left的值必须为负值,并且为其自身高度宽度的一半.
你可以把上面的代码copy下来看看效果,注意:要把我加红注释的部分去掉.