Bootstrap 5.3中Div内按钮无法居中的问题求助

问题根源 #

你添加的text-center类没生效，核心原因是按钮所在的.info-box是Bootstrap内置的flex容器（display: flex），而text-center本质是设置text-align: center，仅对行内元素、非flex容器的块级文本生效，无法控制flex子元素的对齐。

解决方法 #

针对你的代码，有两种直接有效的修正方式：

方式1：给flex容器添加flex对齐类 #

给包含按钮的.info-box添加justify-content-center类，利用flex布局的主轴对齐属性实现水平居中：

<div class="info-box justify-content-center">
  <button type="button" class="btn btn-success mb-2">Click here to start conversation</button>
</div>

方式2：替换为普通块级容器+text-center #

如果不需要.info-box的样式，可以把它换成普通<div>，再添加text-center类（此时容器是块级元素，text-align: center能让行内/inline-block的按钮居中）：

<div class="text-center">
  <button type="button" class="btn btn-success mb-2">Click here to start conversation</button>
</div>

完整修正后的核心代码片段 #

以下是调整后的关键区域代码，可直接替换原代码对应部分：

<div class="col-md-6">
  <!-- 方式1：flex容器+justify-content-center -->
  <div class="info-box justify-content-center">
    <button type="button" class="btn btn-success mb-2">Click here to start conversation</button>
  </div>
  <!-- 方式2：普通块级容器+text-center -->
  <div class="text-center mb-2">   
    <button type="button" class="btn btn-success">Click here to start conversation</button>
  </div>
</div>

额外优化提示 #

如果希望按钮在整个卡片宽度范围内居中，可以给外层的col-md-6添加mx-auto类，让这个列自身在父容器中水平居中，再配合内部按钮的居中设置，就能实现全局居中效果。

内容的提问来源于stack exchange，提问作者Luke Frost IEng MIMechE