I need help centering the caption on my bootstrap 4 carousel. I've tried various methods like adding align-items-center, justify-content-center, and text-center to both carousel-item and carousel-caption, but nothing seems to work.
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">Hello</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">Learn more</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">Hello</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>