Trik: centrirajte apsolutni položaj div

U CSS-u ponekad komplikujemo život jednostavnim stvarima koje su manje komplicirane nego što mislimo, i da se kad vidimo rješenje gotovo nasmijemo promatrajući takve anegdote.

Više od jedne osobe pitalo me je kako centrirati apsolutno pozicionirani div, a odgovor je vrlo jednostavan:

  1. Divu dajemo fiksnu širinu. Primjer: 500 piksela
  2. Apsolutno postavljamo div sa preostalih 50%. Primjer: pozicija: apsolutno; lijevo: 50%;
  3. Sa maržom oduzimamo polovinu onoga što mjeri. Primjer: margina-lijevo: -250px;

Rezultat je savršeno centrirani, apsolutno pozicionirani div.