bootstrap5 カルーセルで横向き・縦向き画像を中央揃えしたい。

実現したいこと

bootstrap5を使用しています。
カルーセルで横向き・縦向き画像が混在していても、横向き画像は横幅100%で上下中央揃え、縦向き画像は縦幅100%で左右中央揃えで表示させたいです。
m-autoで上下左右中央揃えになると思いましたがなりませんでした。
下記のソースコードでは縦向きのみ左右中央揃えで、横向き画像は上揃えになっています。
block、flexの知識不足だと思うのですが解決できないため教えてくださると有難いです。

該当のソースコード

html
1<div class="container">
2    <div class="row justify-content-center">
3        <div class="col-2">
4            <div id="carouselExampleIndicators" class="carousel slide bg-dark" data-bs-ride="carousel">
5
6                <div class="carousel-inner h-px-200 ">
7                    <div class="carousel-item active h-100">
8                        <img src="縦向き画像" class="img-box d-block mx-auto" alt="">
9                    </div>
10                    <div class="carousel-item h-100">
11                        <img src="横向き画像" class="img-box d-block mx-auto" alt="">
12                    </div>
13                </div>
14
15                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
16                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
17                    <span class="visually-hidden">Previous</span>
18                </button>
19                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
20                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
21                    <span class="visually-hidden">Next</span>
22                </button>
23            </div>
24        </div>
25    </div>
26</div>

css
1.h-px-200{
2    height: 200px;
3}
4
5.img-box{
6    width:auto;
7    height:auto;
8    max-width:100%;
9    max-height:100%;
10}
11

試したこと

・m-auto
・d-flex
・align-middle

行動規範の内容に同意します

回答1件

自己解決

絶対配置で指定することで解決しました。

css
1.img-box{
2    max-width:100%;
3    max-height:100%;
4    position: absolute;
5    top: 50%;
6    left: 50%;
7    transform: translate(-50%,-50%);
8}