Dva najbolja načina da centriraš div u 2024

Centriranje elemenata nikad nije bilo lakše uz ova CSS svojstva. Ovo je jedini tutorijal koji će ti trebati za centriranje elemenata horizontalno i vertikalno.

Prvi način: korišćenjem flex-a

Kreiraćemo dva div elementa. Prvom elementu ćemo dodeliti klasu parent, a zatim ćemo unutar njega dodati još jedan div element koji će imati klasu box. Element sa klasom box ce biti onaj kojeg želimo da centriramo na stranici.

<div class="parent">
  <div class="box">
  </div>
</div>

Zatim dodajemo svojstva ovim klasama. Klasi parent cemo dodeliti svojstvo flex, a zatim ćemo pomoću justify-content: center; centrirati sadržaj horizontalno. Nakon toga ostaje nam još da centriramo sadrzaj horizontalno koristeći css svojstvo align-items: center;

.parent {
  display: flex;
  justify-content: center; /*za horizontalno centriranje*/
  align-items: center; /*za vertikalno centriranje*/
  height: 100vh;
}

.box {
  width: 50px;
  height: 50px;
  background-color: yellow;
}

Isprobaj na codepen-u:

See the Pen Center div using flex by Ivana (@ivis27) on CodePen.

Drugi način: korišćenjem grid-a

Da bismo na primeru pokazali kako da koristimo grid layout za centiranje elementa, kreiraćemo sledeće HTML tagove:

<div class="parent">
  <div class="box">
  </div>
</div>

Na div element sa klasom parent dodaćemo display: grid; svojstvo. Zatim možemo na dva načina da centriramo element. Jedan način je da koristeći svojstvo place-items: center; i na taj način u isto vreme centriramo element horizontalno i vertikalno. Drugi način je da koristimo svojstva justify-items: center; i align-items: center; za horizontalno i vertikalno centriranje.

.parent {
  display: grid;
  place-items: center; /* za horizontalno i vertikalno centriranje */
  height: 100vh;
}
.box {
  width: 50px;
  height: 50px;
  background-color: hotpink;
}

Isprobaj na codepen-u:

See the Pen Center div using grid by Ivana (@ivis27) on CodePen.