CSS制作一个绝对固定在页面中间的层（可用于后台登录入口）

<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 这个长度是层宽度的一半

本博客所有文章如无特别注明均为原创。作者：sysdee ，复制或转载请以超链接形式注明转自成功志。
原文地址《CSS制作一个绝对固定在页面中间的层（可用于后台登录入口）》