bootstrap如何居中显示

bootstrap 提供四种水平居中元素的方法：使用 .text-center 类使用 justify-content 实用程序使用 margin: auto使用辅助类 .mx-auto

Bootstrap 居中显示元素

Bootstrap 提供了几种方法来水平居中显示元素：

使用 .text-center 类

• 最简单的方法是将 .text-center 类应用于要居中的元素。
• 例如：

  Hello

使用 justify-content 实用程序

• 对于行内元素，可以使用 justify-content 实用程序。
• 例如，可以使用 row 类创建一个行，然后将 justify-content-center 应用于该行。内部元素会自动居中。

`

`

使用 margin: auto

• 对于块级元素，可以使用 margin: auto 实用程序。
• 例如：
  Item

使用辅助类

• Bootstrap 提供了名为 .mx-auto 的辅助类，它为元素添加 margin: auto 样式。
• 例如：
  Item

注意：

• 并非所有方法都适用于所有元素。
• 居中显示通常与其他样式结合使用，例如设置元素宽度或高度。
• 可以根据需要组合使用这些方法来实现所需的效果。