CSS-Lösung zum Zentrieren von Elementen mit variabler Breite und Höhe

<div Klasse="übergeordnet">
    Elternteil
    <br>
    <div Klasse="Kind">
        Kind
    </div>
</div>

html, Text {
    Rand: 0;
    Breite: 100 %;
    Höhe: 100%;

    .übergeordnet {
        Breite: 100 %;
        Höhe: 100%;
        Hintergrund: #fac3fa;
        
        .Kind {
            Breite: 50%;
            Höhe: 50%;
            Hintergrund: #fe9d38;
        }
    }
}

.übergeordnet {
    Textausrichtung: zentriert;

    .Kind {
        Anzeige: Inline-Block;
    }
}

.Kind {
    Anzeige: Block; // Rand festlegen: 0 automatisch für Elemente, die sich nicht auf Blockebene befinden;
}

.übergeordnet {
    Position: absolut;
    links: 50%;
    transformieren: übersetzenX(-50%);
}

.übergeordnet {
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
}

<div Klasse="übergeordnet">
    <div Klasse="Kind"></div>
</div>

html, Text {
    Rand: 0;
    Breite: 100 %;
    Höhe: 100%;
}
.übergeordnet {
    Anzeige: Tabellenzelle;
    Breite: 800px;
    Höhe: 500px;
    Hintergrund: #fac3fa;

    .Kind {
        Breite: 50%;
        Höhe: 50%;
        Hintergrund: #fe9d38;
    }
}

.übergeordnet {
    Anzeige: Tabellenzelle;
    vertikale Ausrichtung: Mitte;
}

.übergeordnet {
    Position: relativ;
    
    .Kind {
        Position: absolut;
        oben: 50 %;
        transformieren: verschiebeY(-50%);
    }
}

.übergeordnet {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
}

.übergeordnet {
    Position: relativ;
    
    .Kind {
        Position: absolut;
        oben: 50 %;
        links: 50%;
        transformieren: übersetzen(-50 %, -50 %);
    }
}

.übergeordnet {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
}