Bootstrap 提供四种水平居中元素的方法：使用 .text-center 类使用 justify-content 实用程序使用 margin: auto使用辅助类 .mx-auto
Bootstrap 居中显示元素
Bootstrap 提供了几种方法来水平居中显示元素：
使用 .text-center 类
- 最简单的方法是将
.text-center类应用于要居中的元素。 - 例如：
<p class="text-center">Hello</p>
使用 justify-content 实用程序
- 对于行内元素，可以使用
justify-content实用程序。 - 例如，可以使用
row类创建一个行，然后将justify-content-center应用于该行。内部元素会自动居中。
`<div class="row justify-content-center">
<div class="col">Item 1</div>
<div class="col">Item 2</div>
</div>`
使用 margin: auto
- 对于块级元素，可以使用
margin: auto实用程序。 - 例如：
<div style="margin: auto;">Item</div>
使用辅助类
- Bootstrap 提供了名为
.mx-auto的辅助类，它为元素添加margin: auto样式。 - 例如：
<div class="mx-auto">Item</div>
注意：
- 并非所有方法都适用于所有元素。
- 居中显示通常与其他样式结合使用，例如设置元素宽度或高度。
- 可以根据需要组合使用这些方法来实现所需的效果。
