Zusammenfassung der Methoden zur Zentrierung mithilfe von reinem CSS

In diesem Artikel werden Ihnen hauptsächlich die sieben Hauptmethoden zur Verwendung von reinem CSS zur Erzielung einer Zentrierung vorgestellt, darunter die Methode zur Zeilenhöhenzentrierung, die Methode zur Tabellenzellenzentrierung, die Positionierung nach oben, unten, links und rechts + Randzentrierungsmethode sowie die 50%-Positionierung + Randzentrierungsmethode Methode, 50 % Positionierung + Übersetzungszentrierungsmethode, Flexbox-Zentrierungsmethode und Flexbox + Randzentrierungsmethode, Freunde in Not können sich darauf beziehen und lernen.

Vorwort

Ich erinnere mich an eine Zeit, als ich mich für eine Stelle beworben hatte und der Interviewer eine CSS-Frage stellte: Wie mache ich Elemente wann sichtbar? Durchsuchen Zentrieren Sie oben, unten, links und rechts im Browserfenster. Ich erinnere mich, dass die Antwort, die ich damals gegeben habe, darin bestand, zuerst JS zu verwenden, um die Höhe des Browserfensters zu ermitteln, dann die Zeilenhöhe auf den Körper als Fensterhöhe festzulegen und text-align:center festzulegen und dann das Element display:inline- festzulegen. blockieren und vertikal ausrichten: Mitte. Seufz, ich fühle mich müde, wenn ich jetzt nur daran denke.

Muss es JS sein? Gibt es nicht eine Möglichkeit, ein Element nur mit CSS zu zentrieren? Die Antwort lautet: Ja! Und es gibt mehr als einen Weg!

1. Methode zur Zeilenhöhenzentrierung

Übergeordnetes Element: text-align: center; line-height:600px; font-size: 0;

Untergeordnetes Element: display: inline-block; vertical-align: middle;

Hinweis: 600px muss die Höhe des übergeordneten Elements sein. Außerdem ist zu beachten, dass die Schriftgröße auf Null gesetzt werden muss Dieses Attribut wird nicht geschrieben. Dies führt dazu, dass das Element nicht genau vertikal zentriert ist. Diese Methode ist die Methode, auf die ich im Interview geantwortet habe. Die Mängel liegen auf der Hand. Die Höhe des übergeordneten Elements muss bestimmt werden. (Kompatibel mit IE8+)

2. Methode zur Tabellenzellenzentrierung

Übergeordnetes Element: display: table-cell; text-align: center; vertical-align: middle;

Untergeordnetes Element : display: inline-block;

Hinweis: Kompatibel mit IE8+

3 Rechtspositionierung + Randzentrierungsmethode

Übergeordnetes Element: position: relative;

Untergeordnetes Element: position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

Hinweis: Kompatibel mit IE8+

4. 50 % Positionierung + Randzentrierungsmethode

Übergeordnetes Element: position: relative;

Untergeordnetes Element: position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px;

Hinweis: 200 Pixel müssen halb so breit und hoch wie das untergeordnete Element sein. Wenn das untergeordnete Element beispielsweise 100 Pixel breit und 50 Pixel hoch ist, beträgt der Randwert -25 Pixel 0 0 -50 Pixel. Der Nachteil dieser Methode besteht darin, dass die Breite und Höhe der untergeordneten Elemente bestimmt werden muss. (Kompatibel mit IE8+)

5. 50 % Positionierung + Übersetzungszentrierungsmethode

Übergeordnetes Element: position: relative;

Untergeordnetes Element: position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

Hinweis: Diese Methode verwendet das CSS3-Transformationsattribut und ist für mobile Endgeräte geeignet. (Kompatibel mit IE9+)

6. Flexbox-Zentrierungsmethode

Übergeordnetes Element: display: flex; justify-content: center; align-items: center;

Hinweis: Diese Methode verwendet das elastische Flexbox-Layout und es gibt auch große Probleme mit der Mobilkompatibilität. (Kompatibel mit IE10+)

7. Flexbox+Randzentrierungsmethode

Übergeordnetes Element: display: flex;

Untergeordnetes Element : margin: auto;

Hinweis: Wie oben, kompatibel mit IE10+

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zur Zentrierung mithilfe von reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!