Nutzen Sie CSS vollständig, um Elemente zu zentrieren

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen vorstellen, die vollständig CSS verwenden, um eine Elementzentrierung zu erreichen, und CSS verwenden, um eine Elementzentrierung zu erreichen. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

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 line-height auf den Körper als Fensterhöhe festzulegen und text-align festzulegen :center, und legen Sie dann das Element display:inline-block und vertical-align:middle fest. 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. Zeilenhöhenzentrierungsmethode

Übergeordnetes Element: text-align: center; a href="http://www.php.cn/wiki/807.html" target="_blank">font-size<code>text-align: center; line-height:600px; <a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a>: 0;: 0;

Untergeordnete Elemente: 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 . Wenn diese Eigenschaft nicht geschrieben wird, wird das Element nicht genau vertikal zentriert. 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. Tabellenzellenzentrierungsmethode

Ü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: <a href="http://www.php.cn/wiki/902.html" target="_blank">Position<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: relative;: relativ ;

Untergeordnete Elemente: 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: 200px 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;

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von focus-within

Detaillierte Erläuterung der Verwendung von Pseudoelementen::before und : :after

Wie das Attribut „font-size-adjust“ das Webseitenlayout optimiert

Das obige ist der detaillierte Inhalt vonNutzen Sie CSS vollständig, um Elemente zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!