Sztuczka: wyśrodkuj absolutną pozycję div

W CSS czasami komplikujemy sobie życie prostymi rzeczami, które są mniej skomplikowane niż nam się wydaje, i że kiedy widzimy rozwiązanie, niemal śmiejemy się z oglądania takich anegdot.

Więcej niż jedna osoba pytała mnie, jak wyśrodkować absolutnie pozycjonowany element div, a odpowiedź jest bardzo prosta:

  1. Dajemy elementowi div o stałej szerokości. Przykład: 500px
  2. Bezwzględnie pozycjonujemy div z 50% pozostałymi. Przykład: pozycja: bezwzględna; po lewej: 50%;
  3. Odejmujemy połowę tego, co mierzy z marginesem. Przykład: margin-left: -250px;

Rezultatem jest idealnie wyśrodkowany, absolutnie umieszczony div.