Bootstrap 提供 6 种方法来实现元素居中：使用 text-center 类：水平居中。使用 margin: auto;：水平和垂直居中。使用 d-flex 和 justify-content-center：创建具有自定义宽高的居中元素。使用 align-self-center：垂直居中元素。使用 Flexbox 实用程序：水平居中（.mx-auto）、垂直居中（.my-auto）、在父元素中垂直居中（.align-items-center）、在父元素中水平居中（.align-conte
Bootstrap 元素居中方法详解
居中元素在页面布局中至关重要，Bootstrap 提供了几种方法来实现元素居中。
使用 text-center 类
最简单的方法是使用 text-center 类。它将元素水平居中。
<code class="html"><div class="text-center"> 居中的元素 </div></code>
使用 margin: auto;
此方法将元素水平和垂直居中：
<code class="html"><div style="margin: auto;"> 居中的元素 </div></code>
使用 d-flex 和 justify-content-center
要创建具有自定义宽度和高度的居中元素，可以使用 d-flex 和 justify-content-center 类：
<code class="html"><div class="d-flex justify-content-center" style="width: 200px; height: 100px;"> 居中的元素 </div></code>
使用 align-self-center
要垂直居中元素，可以使用 align-self-center 类：
<code class="html"><div class="d-flex flex-column align-self-center"> 居中的元素 </div></code>
使用 Flexbox 实用程序
Bootstrap 提供了以下 Flexbox 实用程序，可以简化居中元素：
-
.mx-auto：水平居中元素 -
.my-auto：垂直居中元素 -
.align-items-center：在父元素中垂直居中元素 -
.align-content-center：在父元素中水平居中元素
选择最佳方法
选择哪种方法取决于元素的上下文和布局要求。对于简单的居中，.text-center 类是最直接的。对于更复杂的布局，Flexbox 实用程序提供了更灵活的选项。
