7 Möglichkeiten, Elemente mit CSS vertikal zu zentrieren

【1】Kennen Sie die Breite und Höhe des zentrierten Elements

absoluter + negativer Rand

Code-Implementierung

.wrapBox5{
    Breite: 300px;
    Höhe: 300px;
    Rand: 1px durchgehend rot;
    Position: relativ;
}
.wrapItem5{
    Breite: 100px;
    Höhe: 50px;
    Position: absolut;
    Hintergrund: gelb;
    oben: 50 %;
    links: 50 %;
    Rand oben: -25px;
    Rand links: -50px;
}

Ergebnisse der Operation

absolut + Rand automatisch

Code-Implementierung

.wrapBox{
    Breite: 300px;
    Höhe: 300px;
    Hintergrund: gelb;
    Position: relativ;
}
.wrapItem{
    Breite: 100px;
    Höhe: 50px;
    Hintergrund: grün;
    Anzeige: Inline-Block;
    Position: absolut;
    oben: 0px;
    unten: 0px;
    links: 0px;
    rechts: 0px;
    Rand: automatisch;
}

absolut + rechnerisch

Code-Implementierung

.wrapBox6{
    Breite: 300px;
    Höhe: 300px;
    Rand: 1px, durchgehend grün;
    Position: relativ;
}
.wrapItem6{
    Breite: 100px;
    Höhe: 50px;
    Position: absolut;
    Hintergrund: gelb;
    oben: berechnet (50 % – 25 Pixel);
    links: berechnen (50 % – 50 Pixel);
}

Ergebnisse der Operation

Drei Vergleiche Zusammenfassung

Wenn die Breite und Höhe des zentrierten Elements bekannt sind, ist die Methode zum Festlegen der Mitte relativ einfach. Das Wesentliche bei allen drei Methoden ist dasselbe. Sie alle führen eine absolute Positionierung auf dem zentrierten Element durch. Nach der Positionierung auf 50 % oben und 50 % links werden sie auf die halbe Breite und Höhe des zentrierten Elements zurückgezogen, um eine echte Zentrierung zu erreichen. Der Unterschied zwischen den drei Methoden liegt in der unterschiedlichen Art und Weise, wie die Breite und Höhe des Elements selbst reduziert wird.

【2】Die Breite und Höhe des zentrierten Elements sind unbekannt

absolut + transformieren

Code-Implementierung

.wrapBox{
    Breite: 300px;
    Höhe: 300px;
    Hintergrund:#ddd;
    Position: relativ;
}
.wrapItem{
    Breite: 100px;
    Höhe: 50px;
    Hintergrund: grün;
    Position: absolut;
    oben: 50 %;
    links: 50 %;
    transformieren: übersetzen(-50 %, -50 %);
}

Ergebnisse der Operation

Das Prinzip ähnelt der Implementierungsmethode mit bekannter Breite und Höhe, mit der Ausnahme, dass die Breite und Höhe des aktuell zentrierten Elements unbekannt sind. Daher müssen die Breite und Höhe des aktuell zentrierten Elements automatisch ermittelt werden. Das Translate-Attribut implementiert genau diese Funktionalität.

Vor- und Nachteile Vorteile: Berechnet automatisch die eigene Breite und Höhe. Nachteile: Wenn andere Eigenschaften der Transformation gleichzeitig verwendet werden, beeinflussen sie sich gegenseitig.
Daher: Diese Methode wird empfohlen, wenn andere Eigenschaften der Transformation nicht verwendet werden.

Flexibles Layout

.wrapBox2{
    Breite: 300px;
    Höhe: 300px;
    Hintergrund: blau;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}
/*Hinweis: Auch wenn Sie das untergeordnete Element nicht als Zeilenblockelement festlegen, belegt es keine einzelne Ebene*/
.wrapItem2{
    Breite: 100px;
    Höhe: 50px;
    Hintergrund: grün;
}

Ergebnisse der Operation

Prinzip: Stellen Sie das übergeordnete Element auf das Flusslayout ein und platzieren Sie das untergeordnete Element entsprechend den Eigenschaftsmerkmalen des Flexlayouts in der Mitte.

Vor- und Nachteile Vorteile: Flex-Layout ist flexibel und erfordert keine Einstellungen für untergeordnete Elemente. Nachteile: Kompatibilität. Float, Clear, Position usw. von untergeordneten Elementen können nicht verwendet werden. Wenn auch andere Layouts vorhanden sind, kann dies leicht Auswirkungen haben.

Tabellenzellenlayout

Code-Implementierung

.wrapBox3{
    Breite: 300px;
    Höhe: 300px;
    Hintergrund: gelb;
    Anzeige: Tabellenzelle;
    vertikale Ausrichtung: Mitte;
    Textausrichtung: zentriert;
}
.wrapItem3{
    Breite: 100px;
    Höhe: 50px;
    Hintergrund: grün;
    Anzeige: Inline-Block;
}

Ergebnisse der Operation

Prinzip: Gemäß der vertikalen Ausrichtungseigenschaft der Tabelle können Sie das Element so einstellen, dass es innerhalb des Tabellenelements zentriert wird, und dann die horizontale Mitte gemäß der Textausrichtung festlegen.

Tabellenelemente

Code-Implementierung

.tableBox{
    Rand: 2px, durchgehend gelb;
    Breite: 300px;
    Höhe: 300px;
}
.tableBox Tabelle{
    Breite: 100 %;
    Höhe: 100 %;
}
.centerWrap{
    Textausrichtung: zentriert;
    vertikale Ausrichtung: Mitte;
}
.centerItem{
    Anzeige: Inline-Block;
    Hintergrund: rosa;
}

Ergebnisse der Operation

Zusammenfassend wird das Tabellentag für das Layout verwendet, hauptsächlich unter Verwendung der Attribute „Vertical-Align“ und „Text-Align“. Im Vergleich zur vorherigen Methode wird durch die Verwendung des Tabellen-Tags jedoch viel redundanter Code generiert. Nicht empfohlen

Damit ist dieser Artikel über 7 Möglichkeiten zum vertikalen Zentrieren von Elementen mit CSS abgeschlossen. Weitere Informationen zum vertikalen Zentrieren von Elementen 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!