利用 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%; 样式：

  ...

示例：

水平居中：

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

登录后复制

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

登录后复制

垂直居中：

Bootstrap 4：

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

登录后复制

Bootstrap 5：

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

登录后复制

以上就是利用 Bootstrap 4/5 实现元素居中的详细内容，更多请关注抖狐科技其它相关文章！