CSS 9 Möglichkeiten, eine vertikale und horizontale Zentrierung mit variabler Breite und Höhe zu erreichen (trockene Informationen)

Es gibt übliche Flex-, Transformations-, Absolut- und usw. Es gibt auch ein CSS3-Rasterlayout. Es gibt auch Pseudoelementmethoden. Ja, Sie haben richtig gelesen, ::after und ::before können auch eine Zentrierung erreichen.

1. Flex

Jeder erste Reaktion könnte Flex sein. Weil die Schreibmethode einfach und intuitiv genug ist und es kein Kompatibilitätsproblem gibt. Es ist die erste Wahl für den Fokus auf Mobiltelefone.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

verwendet zwei Schlüsselattribute: justify-content und align-items, die beide auf „center“ gesetzt sind, um eine Zentrierung zu erreichen.

Es ist zu beachten, dass das Flex-Center hier am übergeordneten Element aufgehängt werden muss, um das einzige untergeordnete Element zu zentrieren.

2. Flex + Marge

Dies ist eine Variante der Flex-Methode. Das übergeordnete Element ist auf „flex“ und das untergeordnete Element auf „margin: auto;“ festgelegt. Es ist zu verstehen, dass die untergeordneten Elemente durch die umgebenden Ränder in die Mitte „gequetscht“ werden.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

3. Transformation + Absolut

Diese Kombination wird oft verwendet, um das Bild zu zentrieren.

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
}
.wrapper > p {
    margin: auto;
}

<div class="wrapper">
    <img src="test.png">
</div>

Natürlich können Sie auch die relative Positionierung des Wrappers des übergeordneten Elements in das untergeordnete Element img verschieben und so die absolute Positionierung ersetzen. Der Effekt ist der gleiche.

4. Tabellenzelle

Verwenden Sie den Zellzentrierungseffekt der Tabelle zur Anzeige. Wie Flex muss es auf das übergeordnete Element geschrieben werden.

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Absolut + Die Werte in den vier Richtungen sind gleich

Absolutes Positionierungslayout verwenden, margin:auto; festlegen und oben, links, rechts, unten Die Werte müssen nur gleich sein (sie müssen nicht alle 0 sein).

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

Diese Methode wird im Allgemeinen für Popup-Ebenen verwendet und die Breite und Höhe der Popup-Ebene müssen festgelegt werden.

6. Schreibmodus

Diese Methode kann die Anzeigerichtung von Text ändern, z. B. die Anzeigerichtung von Text in vertikale Richtung ändern.

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Es gibt noch einige kleinere Kompatibilitätsmängel, aber die meisten Browser, darunter auch Mobiltelefone, unterstützen bereits das Schreiben im Schreibmodus.

7. Raster

Wie Tabellen ermöglicht uns das Rasterlayout, Elemente nach Zeilen oder Spalten auszurichten. Vom Layout her sind Raster jedoch möglicher bzw. einfacher als Tabellen.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

Aber hinsichtlich der Kompatibilität ist es nicht so gut wie Flex, insbesondere mit dem IE-Browser, der nur IE10 und höher unterstützt.

8. Können ::after

auch Pseudoelemente verwendet werden, um eine Zentrierung zu erreichen? Es fühlt sich ganz magisch an, schauen Sie sich das folgende Beispiel an:

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Die horizontale Richtung ist leicht zu verstehen. In vertikaler Richtung kann es so verstanden werden::Nachdem das Bild in die Mitte gezogen wurde.

9. ::before

Das andere ist die Magie, die zusammen mit der Schriftgröße: 0; ausgeführt wird. Das Geheimnis von

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>

font-size: 0; besteht darin, dass es die Lücken zwischen Tags eliminiert. Da Pseudoelemente außerdem mit den grundlegendsten CSS-Schreibmethoden abgeglichen werden, besteht kein Kompatibilitätsrisiko.

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonCSS 9 Möglichkeiten, eine vertikale und horizontale Zentrierung mit variabler Breite und Höhe zu erreichen (trockene Informationen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!