div绝对定位 居中

div绝对定位居中这样的效果在web设计中经常碰到。这个的大前提 ：对已知宽度高度的DIV进行的设置。

主要代码：
position:absolute;
top:50%;
left:50%;
margin-top:-(height/2);
margin-left:-(width/2)

一个div绝对定位居中，他的父级是相对整个html文档的：

html代码：

<div id="wrap">div绝对定位居中</div>

css代码：

#wrap{

    width:200px;

    height:200px;

    position:absolute;

    top:50%;

    left:50%;

    margin-top:-100px;//按照逆时针方向：上 右 下 左

    margin-left:-100px;

}

分析：

position:absolute;这个是必须的。div块区域设置大小200px*200px，距离顶部和左部都是一半。

但是值得注意的是：

这是相对div块的左上角而言的，所以就有了后面二条规则：margin-top:-100px;margin-left:-100px;分别向上和向左移动div块的长和宽的一半，问题解决。

工作中应用之：

如果你想使div绝对定位居中但不是相对整个文档的话，那只要在当前需要定位的div块的父级div再加上：position:relative;那么需要定位的这个div块就相对于它的父级div块了。

<div style="position:relative; width:980px; height:600px;border:1px solid #00F;">
        <div class="main-quick"></div>

</div>