Question

我希望我的<p>元素位于容器<div>的中心，就像完全居中一样 - 顶部，底部，左侧和右侧边距平均分割空间。

我怎样才能做到这一点？

div {
  width: 300px;
  height: 100px;
}
p {
  position: absolute;
  top: auto;
}

<div>
  <p>I want this paragraph to be at the center, but it's not.</p>
</div>

Answer 1

你不需要绝对定位使用

p {
 text-align: center;
line-height: 100px;

}

随意调整......

如果文字超出宽度并超过一行

在这种情况下，您可以做的调整是在规则中包含display属性，如下所示;

（我添加了一个背景，以便更好地查看示例）

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}


p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

在此JBin

中播放

enter image description here

Answer 2

要左/右居中，然后将text-align: center应用于div，将margin: auto应用于p。

对于垂直定位，您应该确保了解这样做的不同方法，这是一个常见问题：Vertical alignment of elements in a div

Answer 3

♣您应该执行以下步骤：

母元素应定位（对于EXP，您可以给它定位：相对;）
子元素应该定位＆＃34; 绝对＆＃34;和值应该像这样设置：top：0; buttom：0; right：0; left：0; （垂直中间）
对于子元素，您应该设置＆＃34; margin：auto ＆＃34; （垂直中间）
儿童和母亲元素应该有＆＃34;身高＆＃34;和＆＃34;宽度＆＃34; 值
代表母元素 =＆gt; text-align：center （中间水平）

♣♣这里只是这5个步骤的总结：

.mother_Element {
    position : relative;
    height : 20%;
    width : 5%;
    text-align : center
    }
.child_Element {
    height : 1.2 em;
    width : 5%;
    margin : auto;
    position : absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }

Answer 4

居中和中等内容？

这样做：

<table style="width:100%">
    <tr>
        <td valign="middle" align="center">Table once ruled centering</td>
    </tr>
</table>

我fiddled it here

哈，让我猜..你想要DIV ..

让你的第一个外行DIV表现得像一个表格单元格，然后用垂直对齐方式设置它：中间;

<div>
    <p>I want this paragraph to be at the center, but I can't.</p>
</div>

div {
    width:500px;
    height:100px;
    background-color:aqua;
    text-align:center;
    /*  there it is */
    display:table-cell;
    vertical-align:middle;
}

jsfiddle.net/9Mk64/

Answer 5

在p元素上，添加3条样式规则。

.myCenteredPElement{
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
}

Answer 6

此解决方案对于除IE之外的所有主要浏览器都适用。所以请记住这一点。

在此示例中，基本上，我对UI元素使用定位，水平和垂直变换来使其居中。

        .container {
            /* set the the position to relative */
            position: relative;
            width: 30rem;
            height: 20rem;
            background-color: #2196F3;
        }


        .paragh {
            /* set the the position to absolute */
            position: absolute;
            /* set the the position of the helper container into the middle of its space */
            top: 50%;
            left: 50%;
            font-size: 30px;
            /* make sure padding and margin do not disturb the calculation of the center point */
            padding: 0;
            margin: 0;
            /* using centers for the transform */
            transform-origin: center center;
            /* calling calc() function for the calculation to move left and up the element from the center point */
            transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
        }

<div class="container">
    <p class="paragh">Text</p>
</div>

我希望有帮助。

Answer 7

您只需将text-align: center添加到<div>

即可

在您的情况下，同时删除您添加到<p>的两种样式。

在此处查看演示：http://jsfiddle.net/76uGE/3/

祝你好运

如何将<p>元素置于</p> <div>容器中？</div>

7 个答案: