Bootstrap v4纯文字轮播：滑动完成才居中，其余时间置顶问题

嘿，我来帮你搞定这个轮播文本对齐的问题！

问题根源 #

你把d-flex、align-items-center这些居中布局类直接加在了carousel-inner上，这就和Bootstrap轮播组件的默认逻辑冲突了。Bootstrap的轮播是靠绝对定位来实现切换动画的，而flex布局会干扰这种定位机制——轮播项在动画过渡过程中，没法正确继承父级的居中样式，只有当动画结束、轮播项变为active状态后，布局才会正常生效，所以就出现了文本先置顶、滑动完成后才居中的奇怪现象。

解决方案一：给每个轮播项单独加居中布局类 #

最稳妥的办法是把居中布局的职责移到每个carousel-item里，让每个轮播项自己负责内部文本的居中，这样不管它处于轮播的哪个状态（过渡中/active），文本都会保持居中。修改后的代码如下：

<div id="myTextOnlyCarousel" class="carousel slide mt-5" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myTextOnlyCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myTextOnlyCarousel" data-slide-to="1"></li>
    <li data-target="#myTextOnlyCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner bg-dark text-light rounded" style="min-height: 300px;">
    <div class="carousel-item active d-flex h-100 align-items-center justify-content-center">
      <h1>This is AWESOME!</h1>
    </div>
    <div class="carousel-item d-flex h-100 align-items-center justify-content-center">
      <h1>This is freaking AMAZING!</h1>
    </div>
    <div class="carousel-item d-flex h-100 align-items-center justify-content-center">
      <h1>YEAHHH</h1>
    </div>
  </div>
  <a class="carousel-control-prev" href="#myTextOnlyCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myTextOnlyCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

解决方案二：自定义CSS兼容flex布局 #

如果你不想重复写布局类，可以通过自定义CSS调整轮播组件的默认样式，让flex布局和轮播动画兼容：

/* 保持carousel-inner的flex居中布局 */
.carousel-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

/* 强制所有轮播项使用flex居中，覆盖默认定位 */
.carousel-item {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 覆盖Bootstrap默认的轮播显示规则，确保过渡中也显示flex布局 */
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
  display: flex !important;
}

这样修改后，不管轮播处于切换动画还是静止状态，文本都会始终保持居中对齐啦！

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