<div style="position: absolute; border:5px solid #444; width:200px; height:200px;margin-left: -100px; left:50%; margin-top:-100px; top:50%">Center DIV</div>

分开解释：

position: absolute;    绝对定位（浮动层）

border:1px solid red;  1像素的红边框，便于查看

width:200px;           宽200px

height:200px;          高200px

margin-left: -100px;   这个值是宽的一半

left:50%;              这个绝对层的左定位。定位在页面的50%的位置。

margin-top:-100px;     ..

top:50%                ..



原理:长宽为200px的浮动层。它距页面左边50%和上边50%的位置。

如果他的长宽为0的话，这时候他是绝对居中的（上下方向和左右方向）。



但是这个层有长宽，所以这时候并不是居中的，

他的实际位置时，据页面最上边50%+它的宽度的一半。



所以写的时候写了margin-top=-100px  这个长度是层宽度的一半