如何在一个相对定位的 div 内居中一个绝对定位的段落

Question

我想要让一个绝对定位的段落在另一个相对定位的div中居中。问题是，由于这是绝对定位，我不能使用text-align:center! 我还想让段落在垂直和水平方向上都居中...

我的HTML代码如下：

<div class="top">

    <p class="same">Django</p>

</div>

CSS

.top
{
    width: 100%;
    height: 70px;
    position: relative;
}
.same
{
    position: absolute;
}

我希望将段落文本“Django”垂直和水平居中 (http://i.imgur.com/MNcaBYs.jpg)。

- capt.swag

---

你需要支持哪些浏览器？ - Nicolae Olariu

.same { position:absolute; width:100%; text-align:center; }。 这样你就可以使用text-align:center的方式了。 - Henri Hietala

Answer 1

你不需要使用绝对定位来实现你想要的效果：

.top { width: 100%; height: 70px; text-align: center; }
.same { display: inline; line-height: 70px; }

您可以强制段落具有内联布局，然后使用text-align:center使它们水平居中。要垂直居中它们，只需将段落的line-height设置为容器的height（在这里不是问题，因为您的容器高度是固定的）。如果您不想显式设置display:inline，可以使用span代替p。

JSFiddle

- potashin

---

如果您想在“top” div中有多个.same段落，会发生什么呢？ :) - Nicolae Olariu

@Nicolae Olariu：那么就会有另一种解决方案。我只是坚持上下文，你知道的，问题说明已经很清楚了。如果OP想要其他东西，他可以在这里发表评论或更新帖子，这样问题就可以更好地指定。 - potashin

Answer 2

你可以通过以下方式实现。

.top
{
    width: 100%;
    height: 70px;
    position: relative;
}
.same
{
    position: absolute;

    height: 50%; /* This is mandatory i.e. this should not be auto */
    text-align: center;
    width: 70%; /*This is not mandatory*/

    /* The code below is required to horizontally and vertically center the <p> element */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

- Barun