HTMLで簡単なUIを作成しようとしています。

1 つの div が表示されない場合、他の div が他の div の中心に配置されるはずですが、これは起こりません。

すべて表示される場合

2 つの div が表示されない場合

私のCSSとHTML:

.playerStats{
    位置: 絶対;
    下: 2px;
    左: 50%。
    変換: 変換(-50%, -50%);
}

.hud {
    幅: 300ピクセル;
    左: -15px;
    /* ポトゼブネ */
    ディスプレイ: フレックス;
    位置: 相対的;
    コンテンツの位置揃え: 間のスペース;
    トランジション: すべて 1 の緩和。
}



.stat {
    境界半径: 50%;
    最大高さ: コンテンツに合わせて;
    最大幅: コンテンツに合わせて;
    位置: 相対的;
    オーバーフロー: 非表示;
    パディング: 2レム;
    背景: rgb(20, 20, 20, 0.3);
    ボックスシャドウ: 0px 0px 15px rgb(0, 0, 0);
    トランジション: すべて 1 の緩和。
    トランジション: 可視性 0.2 秒。
    トランジション: 不透明度 0.2 秒。
}


.hud .stat img {
    幅: 50%;
    位置: 絶対;
    左: 50%。
    トップ: 50%;
    変換: 変換(-50%, -50%);
    トランジション: すべて 1 の緩和。
    トランジション: 可視性 0.2 秒。
    トランジション: 不透明度 0.2 秒。
}

.hud .stat .bg {
    高さ: 100%;
    幅: 100%;
    左: 0;
    位置: 絶対;
    下: 0;
    ボックスシャドウ: 15px 15px 15px 15px rgb(115, 0, 230);
    トランジション: すべて 1 の緩和。
    トランジション: 可視性 0.2 秒。
    トランジション: 不透明度 0.2 秒。
}

<本体>
    <div class="playerStats">
        <div class="hud">
            <div class="stat" id="hp-stat">
                <div class="bg" id="hp" style="背景色: rgb(115, 0, 230)"></div>
                <img src="res/hp.png">
            </div>
            <div class="stat" id="panc-stat">
                <div class="bg" id="panc" style="背景色: rgb(115, 0, 230)"></div>
                <img src="res/panc.png">
            </div>
            <div class="stat" id="pluca-stat">
                <div class="bg" id="pluca" style="背景色: rgb(115, 0, 230)"></div>
                <img src="res/pluca.png">
            </div>
            <div class="stat" id="glos-stat">
                <div class="bg" id="glos" style="背景色: rgb(115, 0, 230)"></div>
                <img src="res/glossredni.png">
            </div>
        </div>
    </div>
</本文>

オーバーフロー処理をいくつか実行してみましたが、何も機能しませんでした。 相対的な位置やその他の位置を変更すると、奇妙な動作が行われます。

ご覧のとおり、中央に配置されていません。 CSS のセンタリングについてはあまり詳しくないので、ここに書きます xD