So verwenden Sie CSS, um eine Box horizontal und vertikal zu zentrieren (8 Methoden)

Originalcode:

center.html :

<!DOCTYPE html>
<html lang="Zh">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Mitte</title>
    <link rel="stylesheet" href="center.css">
</Kopf>

<Text>
    <div Klasse="Vater">
        <div Klasse="Sohn"></div>
    </div>
</body>

</html>

center.css :

Körper {
    Hintergrundfarbe: #6ed0ff;
}

.Vater {
    Hintergrundfarbe: #be33ec;
    Rahmenradius: 20px;
    Kastenschatten: 0 0 15px rgb(0, 0, 0);
    Rand: 100px automatisch;
    Breite: 300px;
    Höhe: 300px;
}

.Sohn {
    Hintergrundfarbe: #fcff00;
    Rahmenradius: 20px;
    Kastenschatten: 0 0 10px rgb(0, 0, 0);
    Breite: 100px;
    Höhe: 100px;
}

Ursprünglicher Effekt:

Bildbeschreibung hier einfügen

So erzielen Sie den vertikalen Zentrierungseffekt der untergeordneten Box relativ zur übergeordneten Box:

Bildbeschreibung hier einfügen

1. grid

.Vater {
    Anzeige: Raster;
}

.Sohn {
    selbst ausrichten: zentrieren;
    sich selbst rechtfertigen: zentrieren;
}

2. absolute + negativer margin

.Vater {
    Position: relativ;
}

.Sohn {
    Position: absolut;
    links: 50%;
    oben: 50 %;
    Rand links: -50px;
    Rand oben: -50px;
}

3. absolute + transform

.Vater {
    Position: relativ;
}

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

4. absolute + margin: auto

.Vater {
    Position: relativ;
}

.Sohn {
    Position: absolut;
    links: 0;
    rechts: 0;
    oben: 0;
    unten: 0;
    Rand: automatisch;
}

5. flex

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

6. margin + transfrom

.Vater {
    Überlauf: versteckt;
}

.Sohn {
    Marge: 50 % automatisch;
    transformieren: verschiebeY(-50%);
}

7. table-cell

.Vater {
    Anzeige: Tabellenzelle;
    Textausrichtung: zentriert;
    vertikale Ausrichtung: Mitte;
}

.Sohn {
    Anzeige: Inline-Block;
}

8. inline-block + vertical-align

.Vater {
    Textausrichtung: zentriert;
    Zeilenhöhe: 300px;
}

.Sohn {
    Anzeige: Inline-Block;
    vertikale Ausrichtung: Mitte;
}

Damit ist dieser Artikel über 8 Möglichkeiten, CSS zum horizontalen und vertikalen Zentrieren einer Box zu verwenden, abgeschlossen. Weitere Informationen zum horizontalen und vertikalen Zentrieren einer Box mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: HTML+CSS3-Code zur Realisierung des Animationseffekts der Planeten des Sonnensystems

>>: Spezifische Verwendung interner temporärer MySQL-Tabellen