利用 Bootstrap 4/5 实现元素居中

在 bootstrap 4/5 中，水平居中元素可以使用 text-center 类或 mx-auto 类，垂直居中元素在 bootstrap 4 中可以使用 d-flex 和 align-items-center 类或使用 margin: auto; 样式，而在 bootstrap 5 中可以使用 d-grid 和 align-content-center 类或使用 position: absolute; 和 top: 50%; left: 50%; 样式。

使用 Bootstrap 4/5 实现元素居中

在 Bootstrap 4/5 中，使用以下方法可以将元素居中：

水平居中

• 使用 text-center 类：
  …
• 使用 mx-auto 类（Bootstrap 5）：
  …

垂直居中

Bootstrap 4：

• 使用 d-flex 和 align-items-center 类：
  …

Bootstrap 5：

• 使用 d-grid 和 align-content-center 类：
  …

使用垂直居中的其他方法

• 使用 margin: auto; 样式：
  …
• 使用 position: absolute; 和 top: 50%; left: 50%; 样式：
  …

示例：

水平居中：

<div class="text-center">   <h1>标题</h1> </div>

<div class="mx-auto">   <button class="btn btn-primary">按钮</button> </div>

垂直居中：

Bootstrap 4：

<div class="d-flex align-items-center">   <h1>标题</h1> </div>

Bootstrap 5：

<div class="d-grid align-content-center">   <button class="btn btn-primary">按钮</button> </div>