Ab in die Mitte

Manchmal bereiten einem die vermeintlich kleinen Dinge unerwartet viele Probleme. Elemente auf einer Website horizontal zu zentrieren ist seit vielen Jahren eine der leichtesten Übungen: text-align:center genügt. Aber ein Element vertikal zu zentrieren war da lange Zeit eine ganz andere Hausnummer.

Später kamen Layout-Techniken wie Flexbox oder Grid auf, die es deutlich leichter machen, Elemente vertikal zu zentrieren. Mit Flexbox kann das beispielsweise so aussehen:

<div class="container">
  <div>Eins</div>
  <div>Zwei</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: begin;
  width: 75em;
  height: 50em;
  border: 1px solid darkgray;
}

.container div {
  width: 5em;
  height: 5em;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid crimson;
}

Außerdem kann man mit align-content die Ausrichtung von Elementen in einem Container bestimmen. Hat der Container ein Flexbox-Layout, geschieht diese Ausrichtung entlang der Querachse, bei einem Grid entlang der Blockachse. Mit align-content: center erreicht man eine Anordnung in der Mitte.

Das Problem war allerdings, bis noch vor einigen Monaten, dass man eben ein Flex-Container oder einen Grid-Container brauchte. In einem “normalen” Block Layout wurde align-content von den meisten Browsern nicht unterstützt. Um ein Element vertikal zu zentrieren, musste man ein Flexbox-Layout oder Grid-Layout einbauen, auch wenn man das sonst gar nicht gebraucht hätte.

Das änderte sich im März und April 2024. Seit Mozilla Firefox 125, Google Chrome 123 oder Microsoft Edge 123 wird align-content auch in Block Layouts unterstützt. Das obige Beispiel kann jetzt also einfach so aussehen:

<div class="container">
  <div>Eins</div>
  <div>Zwei</div>
</div>

.container {
  align-content: center;
  width: 75em;
  height: 50em;
  border: 1px solid darkgray;
}

.container div {
  width: 5em;
  height: 5em;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid crimson;
}

Um einfach nur etwas vertikal zu zentrieren (oder für eine der anderen Positionierungen, die align-content unterstützt), kann also mittlerweise eine einzige Anweisung ausreichen. Das hätten sich die meisten Web-Entwickler in den 1990ern wohl nicht träumen lassen.