Bringen Sie Ihnen bei, wie Sie elegant eine vertikale Zentrierung erreichen (empfohlen)

Vorwort

Es gibt viele Möglichkeiten, in CSS horizontal und vertikal zu zentrieren. Die in diesem Artikel vorgestellten Methoden sind sehr umfassend und detailliert. Sie werden zu Ihrer Information und zum Lernen weitergegeben. Werfen wir einen Blick auf die ausführliche Einführung unten.

„Wir haben vor 44 Jahren einen Mann auf den Mond geschickt und können in CSS immer noch nichts vertikal zentrieren.“ – Jams Anderson

Wenn es beim Webdesign um die Zentrierung geht, ist es am wichtigsten, das Element mit seinem übergeordneten Element zu zentrieren. Es klingt einfach, aber haben Sie über die vielen Möglichkeiten nachgedacht?

Einfach: Elemente mit bekannter Breite und Höhe

Wenn Sie sowohl die Breite als auch die Höhe eines Elements kennen und das Element relativ zu seinem übergeordneten Element vertikal zentrieren möchten, kann die absolute Positionierung eine gute Methode sein, dies zu erreichen.

Elemente mit bekannter Breite und Höhe

hauptsächlich{
    Position: absolut;
    oben: calc(50 % – 3em); //Um 50 % der Höhe des übergeordneten Elements und die Hälfte seiner eigenen Höhe nach oben bewegen links: calc(50 % – 9em); //Um 50 % der Breite des übergeordneten Elements und die Hälfte seiner eigenen Breite nach links bewegen Breite: 18em;
    Höhe: 6em;
}

Erweitert: Elemente mit unbekannter Breite und Höhe

Aber viele Elemente auf der Seite haben eine unbekannte Breite und Höhe.

Elemente mit unbekannter Breite und Höhe

Basierend auf der absoluten Positionierung erweitern.

Wenn wir die Funktion translate() zum Berechnen von Prozentwerten verwenden, basieren die Konvertierung und Bewegung auf der Höhe und Breite des Elements selbst.

Die Funktion translate() kann ein Element in eine angegebene Richtung verschieben, ähnlich der relativen Position. Oder einfacher ausgedrückt: Mit der Funktion „translate()“ können Sie ein Element von seiner ursprünglichen Position verschieben, ohne dass dies Auswirkungen auf Webkomponenten auf der X- oder Y-Achse hat.

Daher müssen Sie die Größe des Elements im kompilierten Code nicht fest codieren, solange Sie prozentbasierte CSS-Transformationen zum Versetzen des Elements verwenden.

hauptsächlich{
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen( -50 %, -50 %);
}

Absolute Positionierung ist nicht geeignet

Wenn wir keine absolute Positionierung verwenden möchten, können wir trotzdem translate() verwenden, um das Element um die Hälfte seiner Breite und Höhe zu verschieben.

Sie können den Rand verwenden, um einen Bewegungseffekt zu erzielen.

hauptsächlich{
    Breite: 18em;
    Polsterung: 13 m 1,5 em;
    Rand: 50vh auto 0; //Der äußere Rand verwendet vh als Einheit, da der Prozentwert des Rands relativ zur Breite seines übergeordneten Elements interpretiert wird. Daher wird hier vh verwendet.
    transformieren: übersetzenY( -50%);
}

Tabellenbasiertes Layout

Eine CSS-Tabelle könnte eine gute Wahl sein.

Weil Tabellen nicht wie normale Elemente auf Blockebene gerendert werden. Wenn das Element beispielsweise 100 % breit ist, nimmt die Tabelle nur die Breite des eigentlichen Inhalts ein, während das Standardelement auf Blockebene automatisch 100 % des übergeordneten Elements einnimmt.

<Tabellenstil="100%">
    <tr>
        <td style="Textausrichtung: zentriert; vertikale Ausrichtung: zentriert">
            Ich bin vertikal zentriert!
        </td>
    </tr>
</Tabelle>

Wenn Sie die Semantik der Seite berücksichtigen, können Sie dies tun

.etwas-semantisches {
    Anzeige: Tabelle;
    Breite: 100 %;
}
.etwas-anderes-semantisch {
    Anzeige: Tabellenzelle;
    Textausrichtung: zentriert;
    vertikale Ausrichtung: Mitte;
}

Inline-Block

Wir könnten sogar die Verwendung von Pseudoelementen in Betracht ziehen.
Wenn wir dafür sorgen, dass das Pseudoelement 100 % der Höhe des übergeordneten Elements einnimmt, setzen wir sowohl das Pseudoelement als auch das Element, das wir vertikal zentrieren möchten, auf „vertical-align: center“.

Dann können wir den vertikalen Zentriereffekt erzielen.

Dies ist eine relativ einfache Methode.

.block {
  Textausrichtung: zentriert;
  Leerzeichen: Nowrap;
}
 
/* Erweitere die Höhe auf 100 % */
.block:vor {
  Inhalt: '';
  Anzeige: Inline-Block;
  Höhe: 100%;
  vertikale Ausrichtung: Mitte;
  margin-right: -0.25em; /* Passt den Abstand an */
}

/* Das vertikal zentrierte Element kann eine beliebige Breite und Höhe haben*/ 
.zentriert {
  Anzeige: Inline-Block;
  vertikale Ausrichtung: Mitte;
  Breite: 300px;
}

Eine Flexbox-basierte Lösung

Mit Flexbox können wir normalerweise das Layout seiner untergeordneten Elemente besser bearbeiten, zum Beispiel:

• Wenn der Elementcontainer nicht genügend Platz hat, können wir sie in derselben Zeile platzieren, ohne die Breite jedes Elements berechnen zu müssen.
• Sie können sie schnell in einer Spalte anordnen;
• Es ist praktisch, sie links, rechts, in der Mitte usw. des Containers auszurichten.
• Die Reihenfolge der Anzeige kann geändert werden, ohne die Struktur zu verändern.
• Wenn für einen Elementcontainer ein Prozentsatz festgelegt ist und sich die Größe des Ansichtsfensters ändert, müssen Sie sich keine Sorgen machen, dass das Layout durch die Nichtangabe einer genauen Breite für das Element beschädigt wird, da jedem untergeordneten Element im Container automatisch ein Anteil der Breite oder Höhe des Containers zugewiesen werden kann.

Es ist zweifellos die beste Lösung. Denn Flexbox ist speziell für diese Art von Bedarf konzipiert 😄

Körper{
    Anzeige: Flex;
    Mindesthöhe: 100vh;
    Rand: 0;
}
hauptsächlich{
    Rand: automatisch;
}

Wenn der Text innerhalb des zentrierten Elements auch zentriert werden muss:

hauptsächlich{
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Breite: 18em;
    Höhe: 10em;
}

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.

siehe:

• CSS entmystifiziert
• http://css-tricks.com/centering-in-the-unknown
• CSS-Transformationen: http://w3.org/TR/css-transforms
• CSS-Werte und -Einheiten: http://w3.org/TR/css-values
• CSS-Flexbox-Layout: http://w3.org/TR/css-flexbox