幅と高さが可変の要素を中央に配置するための CSS ソリューション

<div class="parent">
    親
    <br>
    <div class="child">
        子供
    </div>
</div>

html、本文{
    マージン: 0;
    幅: 100%;
    高さ: 100%;

    。親 {
        幅: 100%;
        高さ: 100%;
        背景: #fac3fa;
        
        。子供 {
            幅: 50%;
            高さ: 50%;
            背景: #fe9d38;
        }
    }
}

。親 {
    テキスト配置: 中央;

    。子供 {
        表示: インラインブロック;
    }
}

。子供 {
    display: block; // 非ブロックレベル要素の場合は margin: 0 auto を設定します。
}

。親 {
    位置: 絶対;
    左: 50%;
    変換: translateX(-50%);
}

。親 {
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
}

<div class="parent">
    <div class="child"></div>
</div>

html、本文{
    マージン: 0;
    幅: 100%;
    高さ: 100%;
}
。親 {
    表示: テーブルセル;
    幅: 800ピクセル;
    高さ: 500px;
    背景: #fac3fa;

    。子供 {
        幅: 50%;
        高さ: 50%;
        背景: #fe9d38;
    }
}

。親 {
    表示: テーブルセル;
    垂直位置合わせ: 中央;
}

。親 {
    位置: 相対的;
    
    。子供 {
        位置: 絶対;
        上位: 50%;
        変換: translateY(-50%);
    }
}

。親 {
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
}

。親 {
    位置: 相対的;
    
    。子供 {
        位置: 絶対;
        上位: 50%;
        左: 50%;
        変換: translate(-50%, -50%);
    }
}

。親 {
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
}