absolute(绝对定位):将被赋予的对象从文档流中拖出,使用left,right,top,bottom等属性相对于最接近的一个最有定位设置的父级对象进行绝对定位,如果父级没有进行定位属性设置,则按照默认规则来设定(根据body左上角作为参考进行定位),同时绝对定位的对象可层叠。

relative(相对定位):对象不可重叠,使用left,right,top,bottom等属性在正常的文档流中进行定位,其对象不可以层叠。

有两种方法可以实现position:absolute元素的水平居中:

1、同时使用绝对定位和负外边距

参考代码如下:

#container {
background: #ffc url(mid.jpg) repeat-y center;
position: absolute;
left: 50%;
width: 980px;
margin-left: -490px;     //除去自身的宽度,就是居中位置咯
}

 

2、如果无法知道元素的宽度,比如文字,就可以使用如下的方法

<style>
.relative {
position: relative;
}

.absolute {
position: absolute;
text-align: center;
/* 添加以下两行,text-align:center;才会生效 */
left: 0;
right: 0;
}
</style>
<div class="relative">
<div class="absolute">
我是要居中的文字啊
</div>
</div>