So zentrieren Sie ein Div in 4

Das Zentrieren eines Div ist seit langem ein Meme unter Softwareentwicklern, insbesondere unter Backend-Entwicklern wie mir, die oft Probleme mit Frontend-Technologien, einschließlich CSS, haben.

Die gute Nachricht ist, dass der Kampf dank der neuen CSS-Eigenschaft align-content endlich vorbei ist. Natürlich behandelt diese Eigenschaft nur die vertikale Ausrichtung. Mehr dazu später.

Wie es historisch gemacht wurde

Vor der Einführung von align-content mussten wir normalerweise entweder CSS Grid oder Flexbox verwenden, um eine vertikale Ausrichtung zu erreichen.

Rasterbeispiel:

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

Flexbox-Beispiel:

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

Die Eigenschaft „justify-content“ wird für die horizontale Ausrichtung von div-Inhalten sowohl in Grid als auch in Flexbox verwendet. Für ein reguläres Div können wir einfach text-align wie folgt verwenden:

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>

Wie es im Jahr 2024 gemacht wird

Mit der Einführung von align-content müssen Sie sich nicht mehr auf Grid und Flexbox verlassen, die jeweils einige Nachteile haben. Wir können das gleiche Ergebnis sauberer erreichen, indem wir Folgendes tun:

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

Wie bereits erwähnt, wird hier nur die vertikale Ausrichtung behandelt. Für die horizontale Ausrichtung können wir weiterhin die zuverlässige text-align-Eigenschaft in Kombination mit align-content verwenden.

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

Bitte beachten Sie, dass die unterstützten Browserversionen mindestens Chrome 123, Firefox 125 und Safari 17.4 sind

Ressourcen

• MDN-Webdokumente: align-content
• Erstellen Sie Ihr eigenes: CSS Vertical Center

Bildnachweis der vorgestellten Bilder

• Ausgewähltes Bild, generiert von ChatGPT

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Div in 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!