如何在 HTML 中将 div 居中[重复]

Question

我想将 div 居中而不将其子元素居中，如下所示：

<center>
<div>
<h1>Hello World!</h1>
</div>
</center>

如你所见，我只希望 div 居中，而不是 div 内的 h1 居中。我希望文本保留在仅以 div 为中心的位置，更不用说我看到了一些添加“display: flex;”的资源和“调整内容：居中；”在正文中，但这将使页面中的所有 div 居中，我希望它应用于我选择的 div 中。

Answer 1

它将让你的元素居中而不居中它的子元素

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
  <div>
    <h1>This is your text</h1>
  </div>
</div>

Answer 2

您可以在跨越整个视口宽度（包含要居中的 div）的 div 中使用

display: flex;

和

justify-content: center;

。

示例：

<div style="display: flex; justify-content: center;" width="100%">
  <!-- ↓ The original div -->
  <div>
    <h1>Hello World!</h1>
  </div>
</div>