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

我想要段落文字＆＃39; Django＆＃39;在垂直和水平方向都在中心（http://i.imgur.com/MNcaBYs.jpg）

Answer 1

你根本不需要绝对定位来实现你想要的目标：

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

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

JSFiddle

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

如何将绝对段落置于相对div内

2 个答案:

JSFiddle