Bootstrap 4轮播标题垂直对齐[重复]答案

【问题标题】：Bootstrap 4 carousel caption vertical align [duplicate]Bootstrap 4轮播标题垂直对齐[重复]
【发布时间】：2018-01-26 04:23:47
【问题描述】：

我想将我的轮播标题置于 bootstrap 4 的中心，但我找不到方法。没有什么对我有用。我尝试添加align-items-center justify-content-center text-center 添加我的carousel-item 或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>

【问题讨论】：

已编辑。我添加了我的 html 代码
物品里面的容器有没有原因？
你能提供一个完整的sn-p代码来重现你的问题吗？当我按原样使用您的代码时，什么都没有显示。
@ZimSystem 不是真的。我猜我只是出于习惯添加它。
@Blazemonger 我也添加了我的 CSS。我猜你需要图像才能工作，所以只添加随机图像。也许它现在可以工作了。

标签： html css bootstrap-4

【解决方案1】：

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

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

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

【讨论】：