div自动居于窗口的正中间的css是什么原理啊，看不太明白，哪位高手可以指点一下

Question

.window{
width: 400px;
position: absolute;
margin-left: -200px;
margin-top: -80px;
top: 50%;
left: 50%;
display: block;
z-index: 2000;
border: 1px solid #006699;
}
如果以上CSS写得不对，哪位可以写一个这个效果的CSS，再加上详细说明，感激不尽

Answer 1

原理是这样的：
因为这个块元素是绝对定位position: absolute。首先你要知道“绝对定位”的概念：它是以最近一个已经定位的祖先为基准进行定位，如果没有就以屏幕定位！
在这里（屏幕大小或祖先元素对于它来说就是100%）；
top: 50%，就是在距屏幕上方或祖先元素50%，
left: 50%，就是在距屏幕左方或祖先元素50%，
因为它是以『左上角』为基准偏移的，它现在距离左边是：50%+400px，这个块的左上角在屏幕的中间，但是这个块元素不在屏幕中间，所以margin-left: -200px;把它想左边拉回一半，它就在屏幕中间了！
因为这里不知道你块的高度，所以margin-top: -80px;和上面的原理一样。往上拉回去一半。。

Answer 2

意思就是把window这个div的左边框通过绝对定位定在正中间，但这样明显这个div就刚好全在window外面那个div的右边了，所以再通过margin-left: -200px将div往左边靠200个像素，因为window的宽度是400px；所以左移200px后就正好居中了

Answer 3

你贴出来的样式不是用来给DIV居中的,如果你在页面中看到是居中效果,可能是由其它样式定义的结果,或是由此样式修正看起来刚好在中间而已.document子对象页面居中一般由margin-left:auto;margin-right:auto;和document的text-align:center;来决定.

Answer 4

这个比较麻烦，也可以将body设置成大小body，大body作为背景，小body作为一个块用text-align:center来实现居中，其余的块都在小body里面浮动，这样就可以实现一劳永逸的居中了。