css - 将绝对定位的元素居中

Question

我有以下文字:

<p>This is the text</p>

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

我希望它距顶部 300 像素，但在浏览器中居中(无论宽度如何)，我该怎么做？谢谢。

Answer 1

水平居中的方法有很多种。但是每种方式都适用于不同的条件。

在这里，我添加了一个带有三个居中版本的 fiddle :http://jsfiddle.net/kizu/5WMNE/

1. 只是文本居中:成本低，但不公平。
2. 对于现代浏览器，您可以使用 transform: translate(-50%,0) 来对齐 block ，因为转换中的百分比是根据元素的尺寸而不是父元素的尺寸计算的.但是它在 IE 中不起作用，但是可以编写可以模拟它的表达式。
3. 如果您要添加额外的包装器，则可以使用 inline-block 真正居中。