Bootstrap 4全屏旋转木马错误:标题会延迟居中

html,body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
#full_slider .carousel-item {
  height: 100vh;
  justify-content: center;
  align-items: center;
}
#full_slider .carousel-item.active {
  display: flex;
  position: relative;
}
#full_slider video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
  z-index: -1;
}
#full_slider .video-caption {
  max-width: 585px;
  color: #fff;
}
#full_slider h3 {
  font-weight: 900;
  font-size: 96px;
  text-shadow: 2px 1px 1px rgba(0, 0, 0 , 0.6)
}
#full_slider .allcases a {
  color: #fff;
  margin-top: auto;
}


.carousel-item.active, .carousel-item-left, .carousel-item-right {
  display: flex !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
  <div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">All about us</h3>
          <p class="allcases">
            <a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Lorem ipsum dolor</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/wittgenstein.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Wittgenstein's philosophy</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#full_slider" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
    <a class="carousel-control-next" href="#full_slider" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  </div>
</div>