Bootstrap 4 轮播标题垂直对齐

Question

我想将我的轮播标题放在引导程序 4 上，但我找不到方法。没有什么对我有用。我尝试align-items-center justify-content-center text-center在我的carousel-itemor上添加添加，carousel-caption但没有任何效果。

body {
  overflow-x: hidden;
  height: 100%
}

.carousel-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
}

.carousel-item {
  height: 100vh;
}

.carousel-image-1 {
  background: url('../images/miami1.jpeg');
  background-size: cover;
}

.carousel-image-2 {
  background: url('../images/miami2.jpeg');
  background-size: cover;
}

.carousel-image-3 {
  background: url('../images/miami3.jpeg');
  background-size: cover;
}

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item carousel-image-1">
                <div class="container">
                    <div class="carousel-caption text-right mb-5">
                        <h1 class="display-3">Sveiki</h1>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
                            exercitationem laboriosam nihil numquam tempora, vitae voluptates. Dolores, maxime!</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item carousel-image-2 active">
                    <div class="carousel-caption mb-5">
                        <h1 class="display-3">Miami</h1>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
                            exercitationem laboriosam nihil.</p>
                        <a href="#" class="btn btn-primary btn-lg">Sužinok daugiau</a>
                    </div>
            </div>
            <div class="carousel-item carousel-image-3">
                <div class="container">
                    <div class="carousel-caption text-right mb-5">
                        <h1 class="display-3">Sveiki</h1>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
                            exercitationem laboriosam nihil numquam tempora, vitae voluptates. Dolores, maxime!</p>
                    </div>
                </div>
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control-next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>

Answer 1

TranslateY，并覆盖 Bootstrap 底部位置应该可以工作。您还想删除容器。

.carousel-caption {
  transform: translateY(-50%);
  bottom: 0;
  top: 50%;
}

https://www.codeply.com/go/ziV9Qvxms8