如何实现Bootstrap 5 Card组件的居中对齐

以下方案全部基于Bootstrap 5原生工具类实现，不需要额外编写大量自定义CSS，可根据实际排版需求选择：

• 方案1：水平+垂直全居中（和截图效果完全匹配）
  给父级main-div添加内置flex工具类即可：

  <div class="main-div d-flex justify-content-center align-items-center min-vh-100">
    <!-- 此处插入你的Card组件 -->
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容示例</p>
      </div>
    </div>
  </div>
  

  类名说明：

  • d-flex：将父容器转为弹性盒模型
  • justify-content-center：实现子元素水平居中
  • align-items-center：实现子元素垂直居中
  • min-vh-100：让父容器最小高度等于视口高度，实现卡片在整个屏幕范围内居中。如果不需要垂直居中，直接删除align-items-center和min-vh-100即可。

• 方案2：仅水平居中（无垂直居中需求时用）
  不需要修改父容器，直接给Card组件添加mx-auto类即可：

  <div class="main-div">
    <div class="card mx-auto" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容示例</p>
      </div>
    </div>
  </div>
  

  注意：必须给Card设置固定宽度或者最大宽度，否则Card会撑满父容器宽度，无法看出居中效果。mx-auto的作用是给元素设置左右自动外边距，是Bootstrap内置的块级元素水平居中方案。

• 方案3：网格系统居中（适配栅格排版场景）
  如果页面已经在用Bootstrap栅格布局，可以通过列偏移实现居中：

  <div class="main-div">
    <div class="row">
      <div class="col-lg-4 offset-lg-4">
        <div class="card">
          <div class="card-body">卡片内容</div>
        </div>
      </div>
    </div>
  </div>
  

  上述代码会在大屏幕下让占4列宽度的Card居中显示，两侧各留4列空白，可根据需要调整列宽数值。

内容的提问来源于stack exchange，提问作者jack