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%);