Ach wie war doch ehedem
Das Table Layout so bequem
Ein schneller vertical-align
Ausrichten kann so einfach sein.

Aber, wie wir alle wissen, sind Layout-Tabellen pfui. Und nebenbei auch umständlich. Und unresponsiv. Und Und Und…

Vertikal zentrieren konnten sie jedoch perfekt. Die Funktionsweise der vertical-align-Eigenschaft, die den Inhalt einer Tabellenzelle ausrichtet, versuchten Generationen von CSS-Newbies auf andere Elemente zu übertragen und fluchten, wenn nichts ging. Oder etwas Unerwartetes, denn die Spec-Autoren hatten beschlossen, dass man außerhalb von Tabellen mit vertical-align die Baseline-Ausrichtung von Inline-Elementen steuert. Und das funktioniert so kontra-intuitiv, dass ich es bisher nicht begriffen habe und in diesem Leben wohl auch nicht mehr begreifen werde.

Seit wir uns von den Layout-Tabellen verabschiedet haben, wurden viele „Techniken“ entwickelt, um eine vertikale Zentrierung zu erreichen, ohne dabei die Größe der Elemente festzuschreiben. Eine der gruseligsten Varianten war die absolute Positionierung und das Zurechtschieben der Elemente mit

.centered {
   position: absolute;
   left: 50%; top: 50%;
   transform:translate(-50%,-50%);
}

Wer nicht weiß, dass top/left ihre Prozente auf den Elterncontainer beziehen und transform seine Prozente auf das transformierte Element, versteht das nie.

Unser Wiki listet das Flexbox-Layout als Königsweg auf. Man macht den Elterncontainer zur Flexbox und sorgt mit justify-content und align-items dafür, dass das zu zentrierende Element horizontal und vertikal in der Mitte landet. Mit Hilfe des Grid-Layouts kann man Ähnliches erreichen.

Aber muss man deshalb für jede Zentrierung eine Flexbox oder ein Grid aufmachen? Muss man, wenn der Ausrichtungscontainer nicht nur Text, sondern auch HTML-Elemente als Kinder enthält, noch ein Sicherheits-div oder -span drumherum machen, weil Flexbox oder Grid sonst das Inline-Layout zerstören?

Die Antwort steht seit 2012 in den Startlöchern. Bereits die erste Fassung der CSS 3 Spezifikation zum Box Alignment sah vor, dass die Eigenschaft align-content auf Blockelemente angewendet werden kann und deren Inhalt vertikal ausrichtet. Oben, Mitte, Unten, wo man es möchte. Die Browserhersteller fanden aber, das sei unwichtig, und haben es nicht implementiert.

Im März 2024 war es endlich so weit: Die Chromium-basierenden Browser und Safari 17.4 unterstützen die Eigenschaft für display:block-Elemente. Firefox hat sich einen Monat mehr gegönnt.

Wie es mit align-content geht, findet ihr seit heute im Selfhtml Wiki:

Inhalte zentrieren

Rolf