Etwas womit viele Menschen Mühe haben ist das Einmitten von Texte oder ganze Container. Ja früher war das immer ein wenig kompliziert aber heute kann man das mit wenigen Code machen. Ich denke jetzt so ab 2022 sollte man sich wirklich mal mit der CSS Funktion von Display: Flex beschäftigen, denn damit kann man sowas wirklich einfach machen und es wird dann immer spannender – vorallem wenn ich an die Grids denke.

Heute zeige ich euch mal wie das ganze funktioniert und wie ihr Texte und ganze Container zentrieren könnt.

Video

Text-Align

Die alte Methode um Text einzumitten wäre:

1

text-align: center;

Horizontales Einmitten

Heute sollte man langsam sich mit Display Flex beschäftigen – so kann man nämlich noch besser und einfacher Texte einmitten.

1
2

display: flex;
justiy-content: center;

Horizontales & Vertikales Einmitten

Will man jetzt also noch einen Text auch noch in der vertikale einmitten, dann kann man den anderen Code einach erweitern.

1
2
3

display: flex;
justiy-content: center;
align-items: center;

Container Horizontales & Vertikales Einmitten

Will man nun sogar noch den Container in der Seitenmitte also auch horizontal und vertikal Einmitten, dann kann man den Code noch mehr erweitern.

1
2
3
4

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);