Ten fragment CSS realizuje klasyczną technikę centrowania elementu w dwóch osiach.
- position: absolute wyłącza element z normalnego przepływu dokumentu i pozwala ustawić go współrzędnymi top i left względem obszaru odniesienia (najczęściej najbliższego przodka z pozycjonowaniem, a gdy go brak – względem viewportu).
- top: 50% oraz left: 50% ustawiają punkt zaczepienia elementu (domyślnie lewy górny róg) w połowie wysokości i szerokości obszaru odniesienia. Na tym etapie nie jest wyśrodkowany środek, tylko róg.
- transform: translate(-50%, -50%) przesuwa element o wartości zależne od jego własnych wymiarów: -50% w osi X oznacza "w lewo o połowę własnej szerokości", a -50% w osi Y "w górę o połowę własnej wysokości". Dzięki temu środek elementu pokrywa się ze środkiem kontenera.
Dlatego odpowiedź "Logo będzie wyśrodkowane na stronie zarówno w pionie, jak i w poziomie." jest poprawna.
Pozostałe odpowiedzi opisują typowe pomyłki: stwierdzenie o przesunięciu "w dół i w prawo" ignoruje ujemne wartości w translate() (znak minus oznacza ruch w górę i w lewo). Wariant "50px" myli procenty z pikselami – tutaj przesunięcie jest proporcjonalne do rozmiaru elementu, a nie stałe. Odpowiedź o obrocie jest błędna, bo obrót realizuje rotate(), natomiast translate() służy wyłącznie do przesuwania.
W praktyce ta metoda jest często używana do centrowania logotypów, modali i nakładek, zwłaszcza gdy rozmiar elementu jest zmienny (responsywny).
