Trik: vycentrujte absolutní pozici div

V CSS si někdy komplikujeme život jednoduchými věcmi, které jsou méně komplikované, než si myslíme, a že když vidíme řešení, skoro jsme se smáli pozorování takových anekdot.

Více než jedna osoba se mě zeptala, jak vycentrovat absolutně umístěný div, a odpověď je velmi jednoduchá:

  1. Dáme div pevnou šířku. Příklad: 500px
  2. Absolutně umístíme div s 50% zbývajícím. Příklad: pozice: absolutní; vlevo: 50%;
  3. S marží odečteme polovinu toho, co měří. Příklad: margin-left: -250px;

Výsledkem je dokonale vycentrovaný, absolutně umístěný div.