Html 卡体中心（引导）

我有一个关于卡片主体的小问题，我想把两个列都放在中间，正如你在图片中看到的，和按钮相比，它在左边。。。我尝试了一些引导类，但我似乎找不到正确的一个。。。希望你能帮助我 [在isherwood之后编辑]

所以我试着把文本中心，但我不知道为什么它的工作方式不一样的片段

<div class="card">
          <div class="card-body ">
            <h5 class="card-title text-center">Jours</h5>
            <div>
              <div class="d-flex justify-content-center">
                <div class="col-sm-6 mb-3 text-center">
                  <fa-icon class="h5" [icon]="faFont.faCoffee"></fa-icon> Matin
                  <div *ngFor="let jour of semaine" class="ms-3 form-check">
                    <input class="form-check-input" type="checkbox" [value]="jour">
                    <label class="form-check-label d-inline-flex">{{jour}}</label>
                  </div>
                </div>
                <div class=" col-sm-6 mb-3 text-center">
                  <fa-icon class="h5" [icon]="faFont.faCookieBite"></fa-icon> Après-Midi
                  <div *ngFor="let jour of semaine" class="ms-3 form-check">
                    <input class="form-check-input" type="checkbox" [value]="jour">
                    <label class="form-check-label d-inline-flex">{{jour}}</label>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center">
              <button type="button" class="btn btn-primary">Valider</button>
            </div>
          </div>

焦耳
马汀
{{jour}}
四月中旬
{{jour}}
瓦利德

如果我理解正确，只需在每列中包含

文本中心即可：



焦耳
马汀
{{jour}}
四月中旬
{{jour}}
瓦利德
谢谢，但它不像代码片段那样工作。。。我的文本在中间，但不是垂直的，复选框仍然在同一个地方…我无法帮助我看不到的东西。你把答案中的工作片段删掉了。也许我们可以找出它，如果你恢复它，让它显示问题。