So erreichen Sie ein zentriertes Layout im CSS-Layout

<!-- css -->
<Stil>
    #Elternteil {
        Höhe: 200px;
        Breite: 200px;
        Rand: 1px durchgehend rot;

        Anzeige: Tabellenzelle; /* In eine Tabelle umwandeln */
        Textausrichtung: zentriert; /* horizontal */
        vertikale Ausrichtung: Mitte; /* vertikal */
    }
    #Kind {
        Hintergrundfarbe: blau;
        Farbe: weiß;

        Anzeige: inline; /* Kindelemente werden auf Inline oder Inline-Block gesetzt*/
    }
</Stil>

<!-- html -->
<div id="übergeordnet">
    <div id="child">Inhalt</div>
</div>

<!-- css -->
<Stil>
    #Elternteil {
        Höhe: 200px;
        Breite: 200px;
        Rand: 1px durchgehend rot;

        position: relative; /* Relative Positionierung festlegen */
    }
    #Kind {
        Höhe: 50px;
        Breite: 50px;
        Farbe: weiß;
        Hintergrundfarbe: blau;

        /* Absolute Positionierung, nachdem die 4 Richtungen auf 0 gesetzt wurden, wird der Rand auf Auto gesetzt */
        Position: absolut;
        links: 0;
        oben: 0;
        rechts: 0;
        unten: 0;
        Rand: automatisch;
    }
</Stil>

<!-- html -->
<div id="übergeordnet">
    <div id="Kind"></div>
</div>

<!-- css -->
<Stil>
    #Elternteil {
        Höhe: 200px;
        Breite: 200px;
        Rand: 1px durchgehend rot;

        display: flex; /* Wandelt das übergeordnete Element in eine flexible Box um*/
        Anzeige: -webkit-flex; /* Safari */
    }
    #Kind {
        Höhe: 50px;
        Breite: 50px;
        Hintergrundfarbe: blau;

        Rand: automatisch;
    }
</Stil>

<!-- html -->
<div id="übergeordnet">
    <div id="Kind"></div>
</div>

<!-- css -->
<Stil>
    #Elternteil {
        Höhe: 200px;
        Breite: 200px;
        Rand: 1px durchgehend rot;

        position: relative; /* Relative Positionierung festlegen */
    }
    #child { /* Wenn das untergeordnete Element seine eigene Breite und Höhe kennt*/
        Hintergrundfarbe: blau;

        Breite: 50px;
        Höhe: 50px;
        Rand oben: -25px;
        Rand links: -25px;
        Position: absolut;
        links: 50%;
        oben: 50 %;
    }
</Stil>

<!-- html -->
<div id="übergeordnet">
    <div id="Kind"></div>
</div>

<!-- css -->
<Stil>
    #Elternteil {
        Höhe: 200px;
        Breite: 200px;
        Rand: 1px durchgehend rot;

        position: relative; /* Relative Positionierung festlegen */
    }
    #child { /* Das untergeordnete Element kennt seine eigene Breite und Höhe nicht. Verwenden Sie die Übersetzungsfunktion von Transform */
        Rand: 1px durchgehend blau;

        Position: absolut;
        oben: 50 %;
        links: 50%;
        -webkit-transform: übersetzen(-50 %,-50 %);
        -ms-transform: übersetzen(-50 %, -50 %);
        -o-transform: übersetzen(-50 %, -50 %);
        transformieren: übersetzen(-50 %,-50 %);
    }
</Stil>

<!-- html -->
<div id="übergeordnet">
    <div id="Kind">
        <div id="Inhalt">
            Inhalt 1
            <br/>
            Inhalt 2
        </div>
    </div>
</div>

<!-- css -->
<Stil>
    #Elternteil {
        Höhe: 200px;
        Breite: 200px;
        Rand: 1px durchgehend rot;

        display: flex; /* Wandelt das übergeordnete Element in eine flexible Box um*/
        Anzeige: -webkit-flex; /* Safari */
        Inhalt ausrichten: zentriert;/* horizontal */
        align-items: center; /* vertikal */
    }
    #Kind {
        Höhe: 50px;
        Breite: 50px;
        Hintergrundfarbe: blau;
    }
</Stil>

<!-- html -->
<div id="übergeordnet">
    <div id="Kind"></div>
</div>