Question

我有以下文字：

<p>This is the text</p>

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

我希望它从顶部开始是300px，但在浏览器中居中（无论宽度），我该怎么做？谢谢。

Answer 1

如果将宽度设置为100％，则可以使用text-align：

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

Answer 2

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

Answer 3

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

在这里，我添加了三个中心版本的小提琴：http://jsfiddle.net/kizu/5WMNE/

只是文本的中心：便宜，但不公平。
对于现代浏览器，您可以使用transform: translate(-50%,0)来对齐块，因为变换中的百分比是从元素的维度计算的，而不是从父级的维度计算的。但它在IE中不起作用，但是可以编写可以模仿它的表达式。
如果您添加了额外的包装器，您可以使用inline-block真正居中。

定位绝对定位的项目

3 个答案: