css样式中position:absolute和position:relative如何水平居中

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>