bUTschy.de

  • Code

CENTER

Ein Element horizontal und vertikal positionieren mit so wenig Code wie möglich und so viel wie nötig.

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

Was auch immer du jetzt in das HTML-Dokument schreibst, es ist genau in der Mitte des Bildschirms.

Demo: https://codepen.io/butschy/pen/NYJKxe

Es gibt auch noch eine weitere Möglichkeit via "grid", hier kommen wir auf nur drei Zeilen.

body {
display: grid;
height: 100vh;
place-items: center center;
}

Finden der IE, Edge, Opera und Safari nur nicht so Geil.

  • 0 Kommentare
  • 2378 Klicks

Kommentare

Kommentar hinzufügen

🙂 😃 😀 😝 😇 😉 😋 😎 🤔 🙄 🙁 😕 😴 😧 😠 😢 😡