I'm attempting to center both horizontally and vertically the images in the bootstrap carousel using the img-fluid class. I want the images to be fully visible (100%) and adaptable to different screens, so I've been utilizing the img-fluid class. The issue arises when the images are not centered vertically - for landscape images, they end up positioned at the top with a large space below. However, portrait images do not face this problem.
Landscape:
https://i.sstatic.net/6NlZZ.jpg
Portrait
https://i.sstatic.net/o8WP1.jpg
Here is the code I'm using:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="background-color:#333;">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item text-center active">
<img class="img-fluid mw-100 mh-100" src="https://storage.googleapis.com/...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've attempted using align-middle and other combinations without success. Any suggestions for what I can do?