Question

我在<p>元素中有两个<div>元素，并希望将它们放在<div>元素的中心。 e.g。

<div id="mydiv">
   <p class="above">some text</p>
   <p class="below">other text</p>
</div>

注意：<div>元素本身并不位于浏览器窗口的中心，因此<p>元素的位置只是相对的。

Answer 1

<强>编辑：

在#mydiv

中添加以下css规则

display:table-cell;
vertical-align:middle;

赞这个

#mydiv{
    position:relative;
    border:1px solid #000;
    width:400px;
    height:300px;

    display:table-cell; /* Added rule - Note: IE8+, Firefox, Chrome, Opera, Safari */
    vertical-align:middle; /* Added rule */
}

#mydiv p{
    text-align:center;
}

UPDATED DEMO

Answer 2

text-align: center;

表示文字。

margin: 0 auto;

用于像div这样的块级元素。

Answer 3

text-align: center;

这对我有用。

Answer 4

你可以试试;

margin-left:auto;
margin-right:auto;

到p

Here 是现场演示

如果您想垂直和水平居中，可以尝试 Dead Center

Here 是一个以div为中心的演示垂直和水平

如何将两个元素放在`<div>`元素</div>的中心

4 个答案:

UPDATED DEMO