css里用了定位不居中,CSS中position定位居中问题请求指教

task3

*{margin:0;padding:0;}

div{width:400px;height:200px;background-color:#ccc;position:absolute;top:50%;left:50%;margin-left:-200px;margin-top:-100px}

这段代码是使用定位的方法让这个DIV居中了，但是我有一点想不通，margin-left:-200px;  margin-top：-100px 这个值怎么来的，求前辈给我详细的说明一下，刚自学没多久。这个相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。这段代码里这个最初的包含块是不是就是我设置有宽度和高度的DIV，这个值就是根据这个高度和宽度来计算的嘛？麻烦各大前辈详细的解释一下，给我推荐一下这样的更多的例子。