Bootstrap环境下内容无法在div中居中？已有代码未生效求解决

嘿，我之前也碰到过类似的情况，Bootstrap自带的工具类其实能帮你快速搞定这个居中问题，不用自己写一堆inline style，给你几个靠谱的方案试试：

方案1：用Bootstrap Flex工具类实现水平+垂直居中 #

如果需要加载动画在容器里水平和垂直都居中，直接用Bootstrap内置的flex布局类就行，比自定义style更可靠：

<div class="dashboard_content-area d-flex justify-content-center align-items-center" style="min-height: 100vh;">
  <div class="infinity-loader">
    <div class="la-ball-beat">
      <div class="dreikanter la-ball-beat__item">1</div>
      <div class="dreikanter la-ball-beat__item">2</div>
      <div class="dreikanter la-ball-beat__item">3</div>
    </div>
  </div>
</div>

关键说明： #

• d-flex：把外层容器转为flex布局，这是居中的基础前提
• justify-content-center：实现水平方向的居中对齐
• align-items-center：实现垂直方向的居中对齐
• min-height:100vh：确保容器至少占满整个视口高度（如果你的容器有固定高度，可以替换成对应的值，比如height: 500px）

方案2：仅水平居中的简化写法 #

如果只需要水平居中，用text-center配合d-inline-block更简单：

<div class="dashboard_content-area text-center">
  <div class="infinity-loader d-inline-block">
    <div class="la-ball-beat">
      <div class="dreikanter la-ball-beat__item">1</div>
      <div class="dreikanter la-ball-beat__item">2</div>
      <div class="dreikanter la-ball-beat__item">3</div>
    </div>
  </div>
</div>

关键说明： #

• text-center：让父容器内的行内/行内块元素自动水平居中
• d-inline-block：把加载动画容器转为行内块级元素，这样才能被text-center的样式影响

排查小技巧：检查自定义样式冲突 #

如果用了上面的方法还是不行，大概率是你的自定义CSS和Bootstrap类冲突了：

• 看看.dashboard_content-area有没有设置float、position: absolute这类会破坏布局的属性
• 检查.la-ball-beat或.dreikanter的自定义style，有没有覆盖flex布局的相关属性

优先用Bootstrap的工具类，能避免很多兼容性和样式冲突问题哦～

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