居中絕對定位的項目

Question

我有以下文字：

<p>This is the text</p> 

p { 
    position: absolute; 
    top: 300px; 
} 

我想這是從頂部300像素，但在瀏覽器（無論寬​​度）爲中心，我會怎麼做？謝謝。

Answer 1

這裏有很多方法可以水平居中的東西。但每種方式都是針對不同的情況。

在這裏，我添加了一個撥弄着三個版本定心：http://jsfiddle.net/kizu/5WMNE/

1. 只是居中文字：價格便宜，但不公平的。
2. 對於現代瀏覽器，您可以使用transform: translate(-50%,0)來對齊塊，因爲變換中的百分比是根據元素的維度計算得出的，而不是從父母的維度來計算。但它在IE中不起作用，但是可以編寫能夠模擬它的表達式。
3. 如果你想添加額外的包裝，你可以使用inline-block真正居中。

Answer 2

如果將寬度設置爲100％，則可以使用文本對齊：

p { 
    position: absolute; 
    top: 300px; 
    width: 100%; 
    text-align: center; 
} 

Answer 3

<div id="outer"> 
    <p>This is the text</p> 
</div> 

p { 
    position: absolute; 
    top: 300px; 
    left: 400px; /* or whatever half the width is */ 
} 
#outer { 
    position: relative; 
}