有时我们在设计网页时需要在屏幕中间放一个div层,并且让他在不管窗口大小的情况下,总是浮动在屏幕中间. www~phperz~com
让div 在水平居中,很容易实现,margin:0 auto;就可以搞定了. php程序员站
但要让他垂直居中,却是个让和我一样的菜鸟们头痛的一个地方 php程序员站
以下这个方法是我在遇到这个问题时在网上找到的一个方法,很强. php程序员站
使用这个方法,你必须设定你屏幕中间的这个div的宽和高. php程序员站
以下为引用的内容：
<!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%; php程序员站
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; //浮动在最上层 phperz.com
}
-->
</style>
<div>欢迎光临php程序员站www.phperz.com</div> |
www.phperz.com
不知道你搞懂了没,关键处在于top和left分别为50%, margin和top 和left的值必须为负值,并且为其自身高度宽度的一半. php程序员站
你可以把上面的代码copy下来看看效果,注意:要把我加红注释的部分去掉. php程序员站
|
