Bootstrap 5 - How to set carousel captions positions - carousel

Question

I have a Bootstrap 5 carousel with captions. Is it possible to add any class to the div containing the carousel-item or the carousel-caption to put the captions in the centre of the slide? Or I still need to use CSS as in older versions (below)? I tried align-middle and similar classes but without success.
Eg. Old solution from Fiddle:
.carousel-caption {
top: 0;
bottom: auto;
}

Answer 1

Can't really find a good combination of just using utility class to achieve what you want, but able to find a minimum way where still need to define a manual class :
.carousel-caption {
transform: translateY(50%);
}
and then add bottom-50 to carousel-caption. Since so it could rather just write
.carousel-caption {
transform: translateY(50%);
bottom: 50% !important;
}
LOL :)
#carouselExampleCaptions {
width: 600px;
height: 400px;
}
.carousel-caption {
transform: translateY(50%);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>