代码如下:
div {
width:600px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
border:1px solid #008800;
}
效果如下:

代码讲解:
width:600px;height:400px; 首先定义div的长款
position:absolute;绝对定位div,使它的位置永远相对于浏览器边框.
top:50%;left:50%; 是div四个角中的左上角居于浏览器中央.注意此处定义top和left值是相对于div的左上角,此刻div的位置应该为如图所示.(此时我们只要把div往左移动整个div宽度的二分之一,再往上移动整个div高度的二分之一就可以了)
margin-top:-200px;margin-left:-300px; 这里要用负值,因为top:50%;left:50% 已经把div挤过去了,
现在要回左和上,需要用到负值.不可用正值,那会更偏左偏下.也不可用margin-bottom 和magrin-right.
原因需要自己去领会.
border:1px solid #008800; 这一句主要是为了做一个边框方便直接看到div的位置,无其他用途.
最新评论