如何使 <div> 容器内的 <p> 元素居中？

Posted 2023-03-05

【中文标题】如何使 <div> 容器内的 <p> 元素居中？

【英文标题】：How to center a <p> element inside a <div> container?

【发布时间】：2013-02-13 19:20:57

【问题描述】：

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

【问题讨论】：

据我所知，你只能用表格单元格、javascript 垂直居中，或者如果你知道元素的高度要提前垂直居中

@ExplosionPills 是对的。您需要知道

这里有两种简单的方法可以使一个 div 中的元素居中，垂直居中，水平居中或两者兼而有之（纯 CSS）：***.com/a/31977476/3597276

【参考方案1】：

你不需要绝对定位 使用

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

并且随意调整...

如果文本超过宽度并超过一行

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

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

div

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



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

在JBin 中玩它

【讨论】：

我没有投票给你，但如果文本超过一行，这将失败。

好吧，我听从了你的建议，稍作调整就奏效了。 div 宽度：300px；背景颜色：黄色；填充顶部：50px；填充底部：50px p 文本对齐：中心；

@insertusernamehere 这就是为什么他必须随意调整。例如包装段落等。我正在解决中心问题。

欢迎您@Johnsy Omniscient。不幸的是，尽管我试图提供帮助，但我还是投了反对票。谁知道为什么！！祝你有美好的一天

Johnsy & @insertusernamehere，最后但并非最不重要。我扩展了我的答案以涵盖可用宽度的更长文本的情况。我包括一个 jsBin 来玩。再见！ :)

【参考方案2】：

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

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

【讨论】：

margin: auto 做到了！谢谢。

【参考方案3】：

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

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

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

祝你好运

【讨论】：

它不是垂直居中的。我更新了你的小提琴：jsfiddle.net/9Mk64

是的。我以为他只是要求水平对齐。

【参考方案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/

【讨论】：

既然知道<table> 是错误的，为什么还要提供解决方案呢？

表格用于表格数据，不用于布局。单行中包含单个单元格的表格绝对不代表表格数据。

哦，语义的观点，你是对的。居中居中，我是对的。

【参考方案5】：

♣你应该做这些步骤：

母元素应该定位（对于EXP你可以给它position:relative;） 子元素应该定位为“Absolute”并且值应该这样设置：top:0;buttom:0;right:0;left:0; （垂直居中） 对于子元素，您应该设置“ma​​rgin : auto”（垂直居中） 子元素和母元素应具有“高度”和“宽度”值 for mother Element => 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;
    

【参考方案6】：

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

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

【参考方案7】：

此解决方案适用于所有主流浏览器，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>

希望对你有所帮助。