使用Bootstrap 5与Flexbox无法居中按钮的技术求助

你当前的代码里，包裹按钮的<div>只添加了align-items-center类，但这个类需要在flex容器上才会生效，而且要实现水平居中，还需要配合justify-content-center类。

修改方法很简单，给按钮的父div补充d-flex和justify-content-center类：

<div class="pb-6 d-flex justify-content-center align-items-center">
  <a href="javascript:;" class="btn btn-success" (click)="newContactPerson()">Define New</a>
</div>

简单说明： #

• d-flex：将该div设置为flex容器，这样后续的flex布局类才能生效
• justify-content-center：让flex容器内的子元素在水平方向居中（flex默认主轴是水平）
• align-items-center：让子元素在垂直方向居中，如果不需要垂直居中可以去掉这个类

这样修改后，"Define New"按钮就能水平居中显示了。

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