Zentrierung in CSS mit "transform"?

Guten Tag,

ich mache schon seit ein paar Jahren gelegentlich Webdevelopment. Bei einer Sache bin ich mir dabei aber immer relativ unsicher, nämlich bei der Zentrierung von Divs und Bildern. Ich google immer und benutze immer eine andere Variante.

Vor einiger Zeit hat mir jemand die folgende Variante zugeschickt. Sie klappt gut, aber ich verstehe ihre Funktionsweise nicht ganz. Deshalb hoffe ich, dass sie mir jemand mit Hintergrundwissen erklären kann:

<div style="left: 50%;top:50%;position:absolute;transform: translate(-50%, -50%)">

</div>

Answer 1

[dregigutefrage]

Position:absolute //absolute Positionierung (nicht vom Textfluss und anderen sachen auf der Seite abhängig)

left:50%;top:50%; //div Position an 50% von oben und 50% von links einrücken(div linke obere Ecke ist nun zentriert, das div jedoch nicht, wenn es grösser als 1x1 Pixel ist)

transform: translate(-50%, -50%) //div nun in beide Richtungen um die -halbe eigene grösse verschieben

Comments

[justTOin]

Achsoo, es handelt sich bei translate um 50% von der eigenen Mitte, das erklärt natürlich einiges! Vielen, vielen Dank! 😊🙏

[dregigutefrage]

@justTOin

gerne, deine Aussage stimmt so aber nicht ganz.
korrekt ist:

...es handelt sich um 50% der eigene Höhe/Breite um die eigene Mitte zu finden...

[justTOin]

@dregigutefrage

ja das meinte ich, habe ich schlecht formuliert

Answer 2

[mrSaturas]

Das transform tag hab ich auch nie ganz verstanden. hab auch noch CSS 1 gelernt...Gott bin ich alt. hier vielleicht ein überblick

https://www.html-seminar.de/css3-transform-elemente-umwandeln.htm

Rest sollte aber klar sein?

Comments

[justTOin]

Joa, danke! 😅

Answer 3

[Limearts]

Das ist eine absolute Zentrierung in der Mitte des Bildschirms / Elements.

Für einfaches Zentrieren würde es bei definierter Breite der Elemente auch ein "margin: auto;" tun.

Left und Top sind soweit klar. Das Problem an diesen ist dass dies die genaue Position des Elements ist. Dieses wird aber in der oberen linken Ecke berechnet. Das Element ist bei genau 50% also nicht exakt in der Mitte sondern nur dessen oberer linker Eckpunkt.

Mittels Transform und Translage werden die Abmessungen des Elements berücksichtigt und dieses nach links und nach oben um jeweils die Hälfte seiner Abmessung verschoben. Damit liegt der Mittelpunkt des Elements genau auf der auszurichtenden Position.

Woher ich das weiß: Berufserfahrung – selbstständiger Dienstleister und Nerd

Comments

[justTOin]

Vielen Dank für die Antwort! Was ich nur nicht verstehe ist halt, wieso es wieder 50% zurück geht. Das müsste doch eigentlich heißen, dass es dann wieder sein sollte wie vorher, oder sehe ich das falsch?

[justTOin]

@justTOin

Hat sich jetzt geklärt :)