Bootstrap中mx-auto未生效：按钮及卡片无法居中问题求助

嗨，我懂你踩的这个坑！mx-auto确实能让容器本身在父元素里水平居中，但它管不了容器内部元素的对齐——这就是为啥按钮、卡片还是靠左的原因。下面给你几个实用的解决办法：

办法一：给父容器加文本居中类 #

如果你的按钮、卡片是行内/行内块元素，直接给它们的父col容器加上text-center类就行，这是Bootstrap最省心的方式：

<div class="col mx-auto text-center">
  <button class="btn btn-primary">居中按钮</button>
  <div class="card mt-3" style="width: 18rem;">
    <div class="card-body">
      <p class="card-text">卡片内文本也居中啦</p>
    </div>
  </div>
</div>

要是卡片是固定宽度的，mx-auto会先让卡片自身在col里居中，再配合父容器的text-center让卡片内的文本对齐；如果卡片是自适应宽度，text-center也能搞定内容的居中。

办法二：用Flex布局类（更灵活） #

Bootstrap自带一堆Flex工具类，给父容器加d-flex justify-content-center flex-column，能让内部元素水平+垂直都居中（按需选择）：

<div class="col mx-auto d-flex justify-content-center flex-column align-items-center">
  <button class="btn btn-primary">水平垂直居中的按钮</button>
  <div class="card mt-3" style="width: 18rem;">
    <div class="card-body text-center">
      <p class="card-text">卡片内文本居中</p>
    </div>
  </div>
</div>

• d-flex：把容器转换成Flex布局
• justify-content-center：让子元素水平居中
• align-items-center：让子元素垂直居中（不需要的话可以去掉）
• flex-column：让子元素垂直排列（适合按钮和卡片上下放置的场景）

办法三：单独给元素加mx-auto #

要是卡片是块级元素，也可以直接给卡片本身加mx-auto，让它在父容器里居中，卡片内的文本再单独加text-center；按钮的话要先转成块级元素再加mx-auto：

<div class="col mx-auto">
  <button class="btn btn-primary d-block mx-auto">居中按钮</button>
  <div class="card mt-3 mx-auto" style="width: 18rem;">
    <div class="card-body text-center">
      <p class="card-text">卡片内文本居中</p>
    </div>
  </div>
</div>

为啥之前mx-auto没起作用？ #

再补个原理帮你理解：mx-auto是通过给元素左右添加自动外边距实现居中，但它只对设置了宽度（或宽度不占满父级）的块级元素生效。按钮默认是行内块，直接加mx-auto没用；而卡片默认是块级，但如果父容器是col，col的宽度是固定的，卡片会自动占满col的宽度，这时候mx-auto也没效果——所以要么给卡片设固定宽度，要么用上面的Flex或text-center来搞定内容对齐。

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