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

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>

原文由 Johnsy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 中使用它

原文由 Fico 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

To get left/right centering, then applying text-align: center to the div and margin: auto to the p .

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

原文由 GordonsBeard 发布，翻译遵循 CC BY-SA 3.0 许可协议