BootstrapVue Carousel Center Text Vertically

<template>  <div>    <b-carousel      class="carousel-center"      :interval="4000"      controls      indicators      background="#ababab"      img-width="1024"      img-height="480"      >      <b-carousel-slide img-blank>        <div class="d-flex h-100 align-items-center justify-content-center">          <div>            <h1>What is Lorem Ipsum?</h1>            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>          </div>        </div>      </b-carousel-slide>      <b-carousel-slide img-blank>        <div class="d-flex h-100 align-items-center justify-content-center">          <div>            <h1>Where does it come from?</h1>            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>          </div>        </div>      </b-carousel-slide>    </b-carousel>  </div></template><style lang="scss">.carousel-center {  .carousel-caption {    top: 20px;  }}</style><!--<style scoped>.carousel-center {}.carousel-center >>> .carousel-caption {    top: 20px;}</style><style lang="scss" scoped>::v-deep .carousel-center {  .carousel-caption {    top: 20px;  }}</style> -->