CSS Ortalama Yöntemleri: Bir Div Yatayda ve Dikeyde Nasıl Ortalanır?

Önce iki eksen: justify ve align

Kutu hizalama özellikleri iki eksende çalışır. Satır ekseni (inline axis), kullandığınız yazım yönünde cümledeki kelimelerin aktığı eksendir; Türkçe ve İngilizce için yataydır. Blok ekseni (block axis) ise paragraf gibi blokların alt alta dizildiği eksendir ve satır eksenine diktir. justify- ile başlayan özellikler (justify-content, justify-items, justify-self) satır ekseninde, align- ile başlayanlar (align-content, align-items, align-self) blok ekseninde hizalar.

Flexbox'ta bir ayrıntı daha vardır: MDN'e göre justify- özellikleri her zaman ana eksende, align- özellikleri her zaman çapraz eksende çalışır. flex-direction: column yazdığınızda ana eksen dikey olur; bu durumda justify-content dikey, align-items yatay hizalama yapar. Ortalamada iki özelliği de center yaptığınız için sonuç değişmez, ama yalnızca birini değiştirdiğinizde bu takas önemlidir.

İki terim daha bilmekte fayda var. Hizalama öznesi (alignment subject) hizalanan şeydir; justify-self ve align-self için öğenin margin kutusudur. Hizalama kapsayıcısı (alignment container) öznenin içinde hizalandığı kutudur ve genellikle öğenin kapsayıcı bloğudur.

Yöntem 1: Flexbox ile ortalama

<div class="container">
  <div class="item">Ortalandım!</div>
</div>

.container {
  height: 8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  width: 10em;
  padding: 20px;
}
/* sonuç: .item hem yatayda hem dikeyde .container'ın ortasında */

Kapsayıcı flex kapsayıcısına dönüşür; justify-content: center öğeyi ana eksende (satır yönünde, yatayda), align-items: center ise çapraz eksende (dikeyde) ortalar. MDN'in tarifinde kapsayıcıya bir yükseklik verilir; çünkü yükseklik yoksa kapsayıcı içeriği kadar yüksek olur ve dikey ortalamanın etkisi görünmez. align-items yerine öğenin kendisine align-self: center yazarak da dikey ortalama yapabilirsiniz; bu, kapsayıcıda birden fazla öğe olduğunda yalnızca birini ortalamak için kullanışlıdır.

Yöntem 2: Grid ile ortalama

.container {
  height: 8em;
  display: grid;
  place-items: center;
}
/* sonuç: tek satırlık ortalama; .item iki eksende de ortada */

place-items, align-items ve justify-items özelliklerinin kısaltmasıdır ve öğeleri iki eksende aynı anda hizalar. MDN, aynı sonucun üç başka yolla da elde edilebileceğini belirtir: kapsayıcıda place-content: center, öğede place-self: center ya da öğede margin: auto.

Aradaki fark, birden fazla öğe olduğunda belirginleşir. place-items her öğeyi kendi hücresinin ortasına koyar. place-content ise ızgara izlerinin (satır ve sütunların) tamamını bir blok olarak kapsayıcının ortasına taşır. Tek öğeli bir kapsayıcıda ikisi aynı görünür.

Yöntem 3: margin auto ile yatay ortalama

Flexbox'tan önce blokları yatayda ortalamanın standart yolu otomatik marginlerdi ve hâlâ geçerlidir. MDN'e göre auto değerindeki bir margin o boyuttaki bütün boş alanı emer; sol ve sağ margini auto yaptığınızda boş alan iki tarafa eşit bölünür ve blok ortaya gelir.

.sayfa {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}
/* aynı anlam: margin: 0 auto;  mantıksal karşılığı: margin-inline: auto; */

Bu yöntemin tek şartı, öğenin kapsayıcıdan dar olmasıdır. Blok öğeler varsayılan olarak kapsayıcının bütün genişliğini kaplar; genişlik vermezseniz dağıtılacak boş alan kalmaz ve ortalama görünmez. Örneğin 50em genişliğindeki bir kapsayıcıda 20em genişliğindeki öğe için boş alan 50em - 20em = 30em olur; her iki margin 30em / 2 = 15em alır. Ayrıca margin değerleri normal akıştaki blok öğelerde dikey ortalama sağlamaz; dikey yönde auto margin bu bağlamda ortalama yapmaz. Margin kısaltmasının değer sırası için kutu modeli yazısına bakabilirsiniz.

Yöntem 4: Flex olmadan dikey ortalama, align-content

align-content özelliği yalnızca flex ve grid kapsayıcılarında değil, blok düzeyindeki öğelerin blok ekseninde de tanımlıdır. MDN'in flexbox kullanım örnekleri sayfası, ortalama örneğindeki flex özelliklerini kaldırıp kapsayıcıya align-content: center eklemenin öğeyi dikeyde ortaladığını, yatay ortalama için de öğeye margin: auto eklenebileceğini anlatır.

.kutu {
  height: 300px;
  align-content: center;
}

.kutu > div {
  width: 100px;
  height: 100px;
  margin: auto;
}
/* sonuç: display değeri değişmeden, iç div dikeyde align-content ile,
   yatayda otomatik margin ile ortalanır */

Blok düzeninde kapsayıcının bütün içeriği tek bir hizalama öznesi olarak ele alınır. Bu yüzden space-between, space-around, space-evenly ve stretch gibi dağıtım değerlerinin blok düzeninde etkisi yoktur; center, start, end gibi konum değerleri ise çalışır. Ayrıca justify-content blok kapsayıcılara uygulanmaz.

Yöntem 5: Metni ve satır içi içeriği ortalamak

Bir başlığın metnini, bir bağlantıyı ya da satır içi bir görseli ortalamak için kutu hizalamaya gerek yoktur. text-align: center, satır içi içeriği satır kutusunun içinde ortalar. Bu özellik kapsayıcıya yazılır; içerideki metni ve satır içi öğeleri ortalar ama içerideki blok öğeleri yatayda taşımaz.

.baslik {
  text-align: center;
}
/* sonuç: başlığın metin satırları ortalanır; başlık kutusu
   yine kapsayıcının tam genişliğini kaplar */

Yöntem 6: Mutlak konumlu öğeyi ortalamak

Kutu hizalama özellikleri mutlak konumlu öğelere de uygulanır. MDN'e göre bu durumda hizalama kapsayıcısı, top, left, bottom ve right ofsetleri hesaba katılmış konumlandırma bloğudur; justify-self satır ekseninde, align-self blok ekseninde hizalar ve place-self ikisini birlikte ayarlar. normal değeri, değiştirilmiş (replaced) öğeler dışında stretch gibi davranır; bu yüzden öğeye bir boyut verip açıkça center istemeniz gerekir.

.kapsayici {
  position: relative;
  height: 200px;
}

.rozet {
  position: absolute;
  inset: 0;
  width: 8em;
  height: 3em;
  place-self: center;
}
/* sonuç: inset: 0 ile hizalama kapsayıcısı .kapsayici'nin tamamı olur;
   .rozet bu alanın ortasına hizalanır */

Konumlandırma bloğunun nasıl belirlendiğini ve inset kısaltmasını position değerleri yazısında anlatıyoruz.

Yazım yönü ve mantıksal değerler

Ortalamada genellikle center kullanırsınız, ama hizalama özellikleri başka konum değerleri de alır: start, end, self-start, self-end, yalnızca flexbox için flex-start ile flex-end ve fiziksel left ile right. MDN, left ve right dışındaki bu değerlerin mantıksal olduğunu, yani içeriğin yazım yönüne göre çalıştığını vurgular. Grid'de justify-content: start Türkçe bir sayfada öğeleri sola, Arapça gibi sağdan sola yazılan bir dilde sağa yaslar.

Bu yüzden ortalama dışındaki hizalamalarda da fiziksel yönler yerine start ve end düşünmek, çok dilli sitelerde aynı CSS'in her yazım yönünde doğru çalışmasını sağlar. center ise her iki yazım yönünde de aynı sonucu verir; ortalama kodunuz dil değiştiğinde bozulmaz. Benzer şekilde yatay ortalama için margin-left ile margin-right yerine mantıksal margin-inline: auto yazabilirsiniz.

Taşan içerik: safe center

Ortaladığınız öğe kapsayıcıdan büyükse, ortalama her iki yönde de taşmaya yol açar. Taşan kısım kapsayıcının başlangıç kenarının (örneğin üst kenarın) dışına çıkarsa kaydırarak bile erişilemeyebilir; MDN bunu "veri kaybı" olarak adlandırır. safe anahtar sözcüğü bu durumda öğeyi start hizalanmış gibi yerleştirir; unsafe ise taşma olsa bile istenen hizalamayı uygular.

.modal-kapsayici {
  display: flex;
  height: 100vh;
  align-items: safe center;
  justify-content: center;
}
/* sonuç: içerik sığıyorsa dikeyde ortada; ekrandan uzunsa
   üstten başlar ve üst kısmı kesilmez */

Hangi yöntemi seçmeli?

Mini örnek: tam ekran karşılama alanı

Bir karşılama (hero) bölümünde başlık ve düğmeyi ekranın ortasında, alt alta göstermek istediğinizi düşünün. Grid tek satırda işi çözer; gap ile öğeler arasına boşluk koyarız:

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 1rem;
  text-align: center;
}
/* sonuç: başlık ve düğme alt alta dizilir; iki öğeden oluşan
   ızgara bir bütün olarak ekranın ortasına taşınır, her öğe kendi
   satırında yatayda ortalanır, metinler de ortalanır */

Burada iki özellik farklı işler görür. place-content: center, ızgara izlerini bir bütün olarak kapsayıcının ortasına toplar; böylece başlık ile düğme, aralarında gap kadar boşlukla birlikte ortada durur. place-items: center ise her öğeyi kendi hücresinin içinde ortalar; düğme başlıktan dar olduğunda bile kendi satırında ortada kalır. vh biriminin mobildeki davranışı için CSS birimleri yazısında dvh ve svh anlatılıyor.

Sık yapılan hatalar

• Kapsayıcıya yükseklik vermemek: Kapsayıcı içeriği kadar yüksekse dikeyde ortalanacak boş alan yoktur; ortalama çalışmıyormuş gibi görünür.
• Genişlik vermeden margin auto kullanmak: Blok öğe zaten tam genişlikteyse otomatik marginler sıfıra iner.
• Blok kapsayıcıda justify-content beklemek: MDN'e göre bu özellik blok kapsayıcılara uygulanmaz; flex ya da grid gerekir.
• Blok öğede align-self kullanmak: align-self blok düzeyindeki kutulara uygulanmaz, çünkü blok ekseninde birden fazla öğe vardır.
• text-align ile kutu ortalamaya çalışmak: Yalnızca satır içi içeriği ortalar; içerideki blok kutular yerinde kalır.
• flex-direction: column sonrası eksenleri karıştırmak: Ana eksen dikey olur, justify-content artık dikeyde çalışır.
• Taşan içeriği unsafe ortalamak: Uzun içerik üstten kesilebilir; safe center kullanın.

Sık Sorulan Sorular

Bir div'i ortalamanın en kısa yolu nedir?

Kapsayıcıya display: grid; place-items: center; yazmaktır. Dikey ortalamanın görünmesi için kapsayıcının bir yüksekliği olmalıdır.

Flexbox mı grid mi?

Tek bir öğeyi ortalamak için ikisi de aynı sonucu verir. Öğeler bir satır boyunca diziliyorsa flexbox, iki boyutlu bir yerleşim ya da tek satırlık kısa yazım istiyorsanız grid daha uygundur. Karar için flexbox rehberi yazısı yardımcı olabilir.

margin: auto neden dikeyde ortalamıyor?

Normal akıştaki blok öğelerde otomatik margin yalnızca satır ekseninde boş alanı paylaştırır. MDN'in ortalama tarifinde ise grid kapsayıcısının içindeki öğeye margin: auto verilerek iki eksende birden ortalama yapılır; yani aynı margin değeri grid öğesinde farklı sonuç verir.

Birden fazla öğeyi grup hâlinde nasıl ortalarım?

Öğeler yan yana duracaksa kapsayıcıyı flex yapıp justify-content: center yazın; öğeler bir grup olarak ana eksenin ortasında toplanır, aralarındaki boşluğu gap ile verirsiniz. Alt alta duracaklarsa yukarıdaki karşılama alanı örneğindeki gibi grid ile place-content: center kullanabilirsiniz.

Ortaladığım öğe neden üstten kesiliyor?

Öğe kapsayıcıdan yüksek ve ortalama her iki yöne taşırıyor olabilir. align-items: safe center yazarak taşma durumunda öğenin başlangıç kenarından hizalanmasını sağlayın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · Flexbox hizalama · CSS grid · Kutu modeli · Anchor positioning