Mehrere häufig verwendete Methoden zum Zentrieren von CSS-Boxen (Zusammenfassung)

<style type="text/css">
        .div1 {
            Breite: 100px;
            Höhe: 100px;
            Rand: 1px durchgezogen #000000;
            Position: relativ;
        }

        .div2 {
            Breite: 40px;
            Höhe: 40px;
            Hintergrundfarbe: rot;
            Position: absolut;
            Rand: automatisch;
            oben: 0;
            links: 0;
            rechts: 0;
            unten: 0;
        }
    </Stil>

    <div Klasse="div1">
        <div Klasse="div2">
        </div>
    </div>

<style type="text/css">
        .div1 {
            Breite: 100px;
            Höhe: 100px;
            Rand: 1px durchgezogen #000000;
            Anzeige: Tabellenzelle;
            vertikale Ausrichtung: Mitte;
        }

        .div2 {
            Breite: 40px;
            Höhe: 40px;
            Hintergrundfarbe: rot;
            Rand: automatisch;
        }

    </Stil>

    <div Klasse="div1">
        <div Klasse="div2">
        </div>
    </div>

<style type="text/css">
    .div1 {
        Breite: 100px;
        Höhe: 100px;
        Rand: 1px durchgezogen #000000;
        Anzeige: Flex;
        /*!*flex-direction: Spalte;*!Optional*/
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
    }

    .div2 {
        Höhe: 40px;
        Breite: 40px;
        Hintergrundfarbe: rot;
    }
</Stil>
<div Klasse="div1">
    <div Klasse="div2">
    </div>
</div>

<style type="text/css">
    .div1 {
        Breite: 100px;
        Höhe: 100px;
        Rand: 1px durchgezogen #000000;
        Position: relativ;
    }

    .div2 {
        Höhe: 40px;
        Breite: 40px;
        Hintergrundfarbe: rot;
        Position: absolut;
        oben: 50 %;
        links: 50%;
        -ms-transform: übersetzen(-50 %, -50 %);
        -moz-transform: übersetzen(-50 %, -50 %);
        -o-transform: übersetzen(-50 %, -50 %);
        transformieren: übersetzen(-50 %, -50 %);
    }
</Stil>
<div Klasse="div1">
    <div Klasse="div2">
    </div>
</div>