Elemente positionieren

Wir haben schon gesehen, dass die zu wählende Methode, Elemente anzuordnen, von der konkreten Situation abhängt. Eine pauschale Empfehlung, für oder gegen eine bestimmte Methode, kann es nicht geben. Die verschiedenen Möglichkeiten schauen wir uns basierend auf dem folgenden HTML-Code an.

Unsere Demo-Struktur beinhaltet einen vollständigen Head und einen Body-Bereich. In dem dort befindlichen „.container“ möchten wir unser „.centered-element“ zentrieren.

Styles fügen wir der Einfachheit halber in den Style-Tag im Head-Bereich ein.

Positionieren mit „Flexbox“

Mit „Flexbox“ können wir Elemente sowohl horizontal als auch vertikal zentrieren. Die Eigenschaften werden von allen modernen Browsern unterstützt, sogar vom Internet Explorer ab Version 10.

Dem äußeren Container – oft auch Wrapper genannt – müssen wir nun die entsprechenden Eigenschaften geben. Dazu benutzen wir das Attribut „display“ um zu definieren, dass es sich um eine „Flexbox“ handelt.

Im nächsten Schritt können wir über „justify-content“ die Items in diesem Container horizontal zentrieren. Um die Items auch noch vertikal zu zentrieren, können wir das Attribut „align-items“ benutzen.

Positionieren mit „Grid“

Die nächste Möglichkeit ist die Benutzung des CSS Grid-Systems. Ähnlich der „Flexbox“ haben wir hier ebenso die Möglichkeit, unsere Items horizontal und/oder vertikal zu zentrieren.

Prinzipiell tauschen wir dabei nur den Wert unseres Attributs „display:flex“ durch „display:grid“ aus.

Wo ist jetzt der Unterschied und wann soll ich welche der beiden Möglichkeiten nutzen? Klar, dass Sie sich das fragen.

Aber, es ist wie immer im Leben, es kommt darauf an.

Beide Systeme bieten eine Vielzahl am Möglichkeiten Elemente zu positionieren. Flex ist Zeilen-orientiert und Grid ist Spalten-orientiert.

Fügen wir nun noch zwei weitere „.centered-element“ hinzu, können wir einen deutlichen Unterschied in der Darstellung erkennen.

Textausrichtung

Wir könnten unseren Text natürlich über die oben genannten Methoden zentrieren, da auch ein Text ein Element ist. Das müssen wir indes nicht tun, denn CSS bietet dafür das Attribut „text-align“.

Absolute Positionierung

Als erstes benötigt der äußere Container eine relative Positionierung. Das bedeutet, dass sich innerhalb des Containers befindliche Elemente absolut in diesem Container ausrichten und diesen nicht verlassen können. Das erreichen wir mit diesem Code.

Nun können wir das innere Element absolut positionieren. Mit „left“ und „top“ setzen wir das Element je 50% vom oberen und linken Rand entfernt. Da wir so die obere linke Ecke des Elementes in der Mitte haben, müssen wir noch zusätzlich über „transform“ je -50%, also die Hälfte des zu positionierten Elements wieder abziehen.

Bitte beachtet, dass, wenn ihr mehrere Elemente über diese Möglichkeit zentrieren wollt, diese alle übereinander liegen würden, da sie ja absolut positioniert sind. Hier müsstet ihr für diese inneren Elemente nochmal einen Container erstellen, der diese Elemente einschließt. Ihr braucht also quasi mehrere Elemente in einem absoluten Element in einem relativen Container.

Für „responsives Webdesign“ eine eher ungeeignete Methode. Sie muss allerdings erlernt werden damit das Verständnis für HTML steigt.

Abstandspositionierung

Die letzte Methode, Elemente mit CSS3 zu positionieren, ist die Abstandspositionierung.

Hierbei haben wir nur die Möglichkeit, Elemente horizontal zu zentrieren. Für eine vertikale Zentrierung müssen wir auf eine der anderen genannten Methoden zurückgreifen.

Bei der Abstandspositionierung geben wir dem zu zentrierenden Element einen Außenabstand zum linken und rechten Rand. Wenn dieser jeweils gleich groß ist, wird das Element zentriert. Nach oben und unten belassen wir den Abstand bei 0, wobei dieser optional angepasst werden kann. In der folgenden Schreibweise steht der erste Wert für die y-Achse (oben und unten) und der zweite Wert für die x-Achse (links und rechts). Für die x-Achse setzen wir den Wert auf „auto“, da dieser sich dann automatisch proportional anpasst.

Trotz dieser vielen Möglichkeiten verzweifelt der ein oder andere doch (anfangs ich auch), wenn es um das Zentrieren von Elementen geht. Sollten Sie sich bereits die Haare raufen, arbeiten Sie mal die folgende Liste ab.
Eventuell liegt hier der Fehler:

• Euer äußerer Container (hier .container) benötigt position: relative; und display: block;
• Die Container (hier .container und .centered-element) benötigen eine feste Breite und ggf. Höhe.
• Die Elemente haben ein margin, padding oder border, von dem Sie nichts wissen.

Viele Wege führen nach Rom (auch wenn man da gar nicht hin will).

Zunächst sieht es so aus, als gäbe es einen Haufen an Möglichkeiten für die Zentrierung der Elemente. Dabei sollte allerdings beachtet werden, dass es auf die konkrete Situation ankommt. Nicht immer ist jede Methode gleich gut geeignet oder auch nur sinnvoll.