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>

總結

以上是生活随笔為你收集整理的css样式中position:absolute和position:relative如何水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。