52

我希望我的<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>

4

7 回答 7

78

你不需要绝对定位使用

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中玩它

在此处输入图像描述

于 2013-02-27T20:12:45.497 回答
16

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

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

于 2013-02-27T20:19:53.413 回答
2

♣您应该执行以下步骤：

  1. 应该定位母元素（对于EXP，您可以给它位置：相对；）
  2. 子元素应该定位为“绝对”并且值应该设置如下：top:0;buttom:0;right:0;left:0; （垂直居中）
  3. 对于子元素，您应该设置“边距：自动”（垂直居中）
  4. 孩子和母亲元素应该有“高度”和“宽度”值
  5. 对于母元素=>文本对齐：中心（水平居中）

♣♣这只是这 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;
    }
于 2017-09-15T17:04:07.053 回答
0

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

在您的情况下，还要删除您添加到<p>.

在这里查看演示：http: //jsfiddle.net/76uGE/3/

祝你好运

于 2013-02-27T20:27:26.760 回答
0

居中和居中的内容？

这样做：

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

我在这里摆弄它

哈，让我猜猜..你想要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/

于 2013-02-27T20:45:54.437 回答
0

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

.myCenteredPElement{
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
}
于 2019-03-05T19:53:20.980 回答
0

此解决方案适用于除 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>

我希望这会有所帮助。

于 2020-03-12T15:06:54.273 回答