div绝对定位 居中

2018-03-12 11:37:36   1732

div绝对定位居中这样的效果在网页设计中经常碰到

父级是相对整个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块设置为了200*200大小,距离顶部和左部都是一般,但是值得注意的是这是相对div块的左上角而言的,

所以就有了后面二条规则:

margin-top:-100px;
margin-left:-100px;

分别向上和向左移动div块的长和宽的一半,问题解决。

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