Trik: centrirajte apsolutni položaj div

U CSS-u ponekad kompliciramo ž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 me osoba pitalo kako centrirati apsolutno pozicionirani div, a odgovor je vrlo jednostavan:

  1. Divu dajemo fiksnu širinu. Primjer: 500 piksela
  2. Apsolutno postavljamo div s preostalih 50%. Primjer: pozicija: apsolutna; lijeva: 50%;
  3. S maržom oduzimamo polovicu onoga što mjeri. Primjer: margin-left: -250px;

Rezultat je savršeno centrirani, apsolutno pozicionirani div.