Elemente mit CSS vertikal zentrieren

Ich melde mich aus der Sommerpause mit einem kleinen Tipp und einer Bitte zurück. Ich musste gestern ein Bild innerhalb eines div mit fixer Höhe vertikal zentrieren. Mein erster Gedanke war irgendeine Lösung mit position: relative und absolute. Ich wollte aber noch checken, ob es andere, bessere Lösungen gibt. Dann ist mir aber eingefallen, dass ich gar nicht erst suchen muss, weil ich die beste Lösung schon kenne, Flexbox.

HTML

<div>
    <img src="dasbild.jpg" />
</div>

CSS

div {
    width: 200px;
    height: 200px;

    display: flex;
    align-items: center;
}

Man macht das Elternelement zu einem Flexbox-Element und zentriert das Kindelement mit align-items: center;. Fertig. Ein Beispiel, inklusive 3 weiterer Techniken ohne Flexbox, habe ich auf codepen gestellt.

Und damit komme ich auch schon zu meiner Bitte: Fangt an mit Flexbox zu arbeiten. Die Browserunterstützung ist super und es gibt viele Lern- und Nachschlageressourcen, wie beispielsweise der css-tricks.com Artikel oder flexboxin5.com.

Manuel Matuzovic

Frontend Developer aus Wien.

2 Kommentare zu “Elemente mit CSS vertikal zentrieren

  1. Ja sogar Bootstrap 4 unterstützt jetzt optional Flexbox. Und ich hab mich eh schon in die Flexerei verliebt… justify-content: center; ist auch liebenswert ;)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *