mrcng.pl
mrcng.pl to wypadkowa moich projektów. Projektowanie stron, prowadzenie firmy, branża kreatywna.

Jak wyśrodkować w poziomie element z pozycją absolutną?

Tworząc różnego rodzaju layouty nieraz trzeba wyśrodkować element z pozycją absolutną względem elementu zawierającego (kontenera). Efekt bardzo łatwo można uzyskać za pomocą CSS.

O ile znamy długość elementu o tyle możemy posiłkować się takim kodem:

position: absolute;
left: 50%;
margin-left: -100px; (połowa długości elementu)
width: 100%;

Niestety w sytuacji kiedy nie znamy długości elementu albo jest on dynamiczny warto skorzystać z właściwości „transform: translateX(-50%)”, a idąc tym tokiem rozumowania można również element absolutny wyśrodkować w pionie za pomocą „transform: translateY(-50%)”. A obie kombinacje w jednej linii zapiszemy za pomocą:

transform: translate(-50%, -50%);