CSS: Vertikal zentrieren unkompliziert

Scheinbar simple Dinge sind via CSS oft schwieriger als gedacht umsetzbar. Ab und zu stößt man auf das Problem, dass ein Element in einem anderen vertikal zentriert angeordnet werden soll. Das kann dann schon mal etwas fummelig werden. Heute stieß ich über eine sehr einfache und unkomplizierte Lösung, selbst wenn die Höhe des äußeren Elementes unbekannt ist.

Möchte man bei bekannter Höhe eines Block-Elements das darin enthaltene Inline-Element vertikel anordnern, hilft dieser Blogpost von Sebastian weiter. Wie gesagt muss dafür aber die Höhe des äußeren Block-Elements sowie jene des inneren Elements bekannt sein.

Ist keine Höhe bekannt, hilft die CSS-Funktion transform weiter. Auf das zu zentrierende Element wendet man folgende CSS-Regeln an, was dazu führt, dass der obere Rand des Elements auf 50% der Höhe des äußeren Elements gebracht wird und anschließend um die Hälfte der Höhe des inneren Elements wieder nach oben geschoben wird.

    .element {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

Firefox unterstützt CSS transform2d ohne Präfix, für Internet Explorer und Webkit-Browser müssen diese allerdings wie folgt ergänzt werden.

    .element {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

Eine Übersicht über Kompatibilitäten zu allen Browsern gibt es hier. [Quelle]