CSS ile Ortalama: Flexbox ile Dikey ve Yatay Hizalama

Bir öğeyi ekranın tam ortasına almak, CSS'in klasik sorusudur. En temiz çözüm Flexbox'tır.

Yatay + dikey ortalama

.kutu {
  display: flex;
  justify-content: center;  /* yatay ortala */
  align-items: center;      /* dikey ortala */
  height: 300px;
}

İçindeki her şey artık tam ortada olur. Üç sihirli satır bu kadar.

Sadece yatay ortalama (metin/blok)

.metin { text-align: center; }
.blok  { margin: 0 auto; width: 300px; }

Grid ile de olur

.kutu { display: grid; place-items: center; height: 300px; }

place-items: center tek satırda hem yatay hem dikey ortalar — en kısa yol!