Inhalte vertikal im Container zentrieren

Es gibt diverse Möglichkeiten wie man mittels CSS Inhalte vertikal an einem DIV-Container zentrieren kann. Viele haben den Nachteil, dass eine fixe Höhe für den zu zentrierenden Inhalt vergeben werden muss.

Dieses Beispiel zeigt auf, wie man Inhalte unabhängig von der Höhe vertikal in einem Container zentrieren kann. Hierfür nutzt man für den äußeren Container die CSS-Eigenschaft display: table. Alle Container innerhalb erhalten display: table-cell. Jener Container, dessen Inhalt zentriert werden soll, bekommt vertical-align: middle zugewiesen.

 CSS

HTML

 Ergebnis

Beispiel: Inhalte mit CSS vertikal am Container zentrieren