Bootstrap 中心垂直和水平对齐

Question

我有一个只有表单存在的页面，我希望将表单放置在屏幕的中心。

 <div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>
  </div>
</div>

justify-content-center 水平对齐表格，但我不知道如何垂直对齐。我曾尝试使用 align-items-center 和 align-self-center ，但它不起作用。

我错过了什么？

演示

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

Answer 1

引导程序 5（2021 年更新）

Bootstrap 5 仍然基于 flexbox ，因此垂直居中的工作方式与 Bootstrap 4 中的相同。例如， align-items-center （flex-direction: row）和 justify-content-center （flex-direction: column) 可以在 flexbox 父级（行或 d-flex）上使用。

在 Bootstrap 5 中居中示例

垂直中心（不要忘记父级必须有一个定义的高度！）：

• my-auto 用于在 flex ( .d-flex ) 元素 内部 居中
• my-auto 可用于在 —459463b125cae5c662668eadbc4e5f— 内 居中列（ .col- row
• align-items-center 到 内 的 中心柱（ col-* row

水平中心：

• text-center 居中 display:inline 元素和列内容
• mx-auto 用于在 flex 元素内部居中
• mx-auto 可用于在 --- 内 居中列（ .col- row
• justify-content-center 到 中心列（ col-* ）里面 row

---

Bootstrap 4.3+（2019 年更新）

不需要 额外的 CSS 。 Bootstrap 中已经包含的内容将起作用。确保表格的容器是 全高 的。 Bootstrap 4 现在有一个 h-100 100% 高度的类…

垂直中心：

 <div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>
  </div>
</div>

https://codeply.com/go/raCutAGHre

具有居中项目的容器的高度应为 100% （或相对于居中项目的所需高度）

注意：当在任何元素上使用 height:100% （ 百分比高度）时，元素 会采用其容器的高度。在现代浏览器中，可以使用 vh 单位 height:100vh; 代替 % 来获得所需的高度。

因此，您可以设置 html、body {height: 100%}，或者在容器上使用新的 min-vh-100 类来代替 h-100 。

---

水平中心：

• text-center 居中 display:inline 元素和列内容
• mx-auto 用于在 flex 元素内部居中
• offset-* 或 mx-auto 可用于 中心列（ .col- ）
• justify-content-center 到 中心列（ col-* ）内部 row

---

Bootstrap中的垂直对齐中心

Bootstrap 4 全屏居中表单

Bootstrap 4 中心输入组

Bootstrap 4 水平+垂直居中全屏

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

Answer 2

这对我有用：

 <section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

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