使DIV上下左右居中(如何使一个div绝对居中显示)

代码如下:

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的位置,无其他用途.