居中绝对定位的项目

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; 
}