div绝对定位 居中

div绝对定位居中这样的效果在网页设计中经常碰到，这里记录下来和大家共同学习。

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

html代码：

">div绝对定位居中

css代码：

#wrap{

width:200px;

height:200px;

position:absolute;

top:50%;

left:50%;

margin-top:-100px;

margin-left:-100px;

}

分析：position:absolute;这个是必须的。div块设置为了200*200大小，距离顶部和左部都是一般，但是值得注意的是这是相对div块的左上角而言的，所以就有了后面二条规则：margin-top:-100px;margin-left:-100px;分别向上和向左移动div块的长和宽的一半，问题解决。

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

猜你喜欢