如何在引导程序 4 的容器中垂直和水平居中文本？ [复制]

Posted 2023-03-05

【中文标题】如何在引导程序 4 的容器中垂直和水平居中文本？ [复制]

【英文标题】：How do I vertically and horizontally center text in a container in bootstrap 4? [duplicate]

【发布时间】：2018-05-09 19:39:53

【问题描述】：

假设我想将 h1 和 p 元素在分区中居中。

<div id="outer" class="container">
 <div id="inner">
  <h1>Heading</h1>
  <p>Some content</p>
 </div>
</div>

【参考方案1】：

很容易将父div设为display: flex，将子元素设为margin: auto;

查看下面的演示。

#outer 
  width: 100%;
  height: 100vh;
  display: flex;


#inner 
  margin: auto;

<div id="outer" class="container">
  <div id="inner">
    <h1>Heading</h1>
    <p>Some content</p>
  </div>
</div>

【参考方案2】：

<div id="outer" class="container text-center">
<div id="inner">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
</div>

#outer
min-height:100vh;
display:flex;


#inner
margin:auto;

请按上述方式更新您的代码。对于#outer 使用display:flex 和min-height:100vh，这将跨越100% 的屏幕。对于#inner，使用margin:auto 使文本居中

【讨论】：

谢谢。这完成了工作！

【参考方案3】：

Bootstrap 4 使用 flexbox，所以 d-flex 分配属性 display: flex 而不是 align-items-center 垂直对齐，justify-content-center 水平对齐。

<div id="outer" class="container d-flex align-items-center justify-content-center">
    <div id="inner">
      <h1>Heading</h1>
      <p>Some content</p>
    </div>
</div>

【讨论】：

虽然只有代码的答案可能会解决问题，但对您的答案的一些解释将有助于其他人了解您做了什么以及为什么这样做。

这个 imo 是最好的答案 - 只使用类而不是自定义 css。