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

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

Artikel empfehlen

10 Aspekte, die beim Entwurf und Aufbau einer umfangreichen Website-Architektur berücksichtigt werden müssen

Wir diskutieren hier nicht über PHP-, JSP- oder ....

Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7

Kurzbeschreibung <br />In IE6 und 7 wird in...

So starten Sie das Spring-Boot-Projekt mit dem integrierten Linux-System in Win10

1. Installieren Sie das integrierte Linux-Subsyst...

Einführung in die Leistungsoptimierung von MySQL-Datenbanken

Inhaltsverzeichnis Warum optimieren? ? Wo soll ic...

SQL IDENTITY_INSERT-Fallstudie

Wenn eine Spalte in einer Datentabelle einmal als...

Grafisches Beispiel für die Verwaltung von Datenträgerkontingenten unter Linux

Das Datenträgerkontingent ist die Speichergrenze ...

MySQL-Schleife fügt zig Millionen Daten ein

1. Erstellen Sie eine Testtabelle Tabelle `mysql_...

Detaillierte Erklärung, wie Sie die Fallstricke beim Ersetzen von logischem SQL in MySQL vermeiden können

Der Unterschied zwischen „Ersetzen durch“ und „Ei...

js+canvas realisiert Code-Regeneffekt

In diesem Artikel wird der spezifische Code des j...

So legen Sie in Linux eine feste IP fest (getestet und effektiv)

Öffnen Sie zunächst die virtuelle Maschine Öffnen...

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

Heute habe ich gelernt, MySQL zu installieren. Da...

Beispielanalyse von MySQL-Start- und Verbindungsmethoden

Inhaltsverzeichnis So starten Sie mysqld Methode ...

Verwenden von Apache ab zum Durchführen von HTTP-Leistungstests

Mac wird mit Apache-Umgebung geliefert Öffnen Sie...

Detaillierte Erklärung gängiger Befehle im Docker-Repository

Einloggen Docker-Anmeldung Schließen Sie die Regi...

Beispiel für die MySQL-Methode zum Löschen von Daten und Datentabellen

Es ist sehr einfach, Daten und Tabellen in MySQL ...