Tailwind CSS ile Div Ortalama: Flex, Grid, mx-auto ve absolute Tarifleri

Önce soru: neyi, neyin içinde ortalıyorsunuz?

"Ortalama çalışmıyor" sorunlarının büyük kısmı yanlış tarifin seçilmesinden doğar. Karar vermeden önce üç soruyu cevaplayın. Birincisi: yalnızca yatay mı, yoksa dikey de mi ortalayacaksınız? Yatay ortalama neredeyse her zaman kolaydır; dikey ortalama ise kapsayıcının içerikten yüksek olmasını gerektirir. İkincisi: ortalanacak şey metin mi, bir kutu mu? Metin için text-center, kutu için düzen sınıfları gerekir. Üçüncüsü: öğe normal akışta mı kalmalı, yoksa başka içeriğin üstüne mi binmeli? Üstüne binecekse konumlandırma tarifleri devreye girer.

Bir dördüncü soru da çoğu zaman gözden kaçar: ortalama sınıfını hangi öğeye yazıyorsunuz? Flex ve grid tariflerinde sınıflar kapsayıcıya, kenar boşluğu ve konumlandırma tariflerinde ise ortalanacak öğeye verilir. Bu ayrımı baştan netleştirmek, aşağıdaki tariflerin hangisinin nerede kullanılacağını anlamayı kolaylaştırır.

Tarif 1: flex items-center justify-center

Skill'deki "Flex Center" kalıbı tam olarak budur ve en yaygın yöntemdir. Kapsayıcıyı flex yapıp ana eksende justify-center, çapraz eksende items-center ile ortalarsınız. Skill'deki örnek yükseklik için min-h-screen kullanıyor; biz burada min-h-dvh tercih ettik:

<div class="flex min-h-dvh items-center justify-center">
  <div>Ortadaki kutu</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .flex {
    display: flex;
  }
  .min-h-dvh {
    min-height: 100dvh;
  }
  .items-center {
    align-items: center;
  }
  .justify-center {
    justify-content: center;
  }
}

min-h-screen v4.3.5'te min-height: 100vh, min-h-dvh ise min-height: 100dvh üretir. dvh, dinamik görüntü alanı yüksekliğini ifade eden birimdir; mobil tarayıcılarda adres çubuğu açılıp kapandığında değişen yüksekliği izler. Yükseklik birimleri arasındaki farklar width, height ve size yazısında anlatılıyor.

Bu tarifin avantajı, birden fazla öğeyi de ortalayabilmesidir: öğeler yan yana bir grup oluşturur ve grup ortalanır. Alt alta ortalı bir grup istiyorsanız flex-col ekleyin; ama o zaman eksenler yer değiştirir ve items-center yatay, justify-center dikey ortalamayı üstlenir. İki sınıfı birlikte kullandığınız sürece sonuç değişmez, yalnızca biri eksikse fark görünür.

Tarif 2: grid place-items-center

Aynı sonucu iki sınıfla da alabilirsiniz:

<div class="grid min-h-dvh place-items-center">
  <div>Ortadaki kutu</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .grid {
    display: grid;
  }
  .min-h-dvh {
    min-height: 100dvh;
  }
  .place-items-center {
    place-items: center;
  }
}

place-items: center tek bildirimle hem satır hem blok ekseninde hizalamayı ortaya çeker. Tek bir öğeyi ortalamak için en kısa tariftir. Birden fazla öğe koyduğunuzda fark ortaya çıkar: grid onları alt alta ayrı satırlara dizer ve kapsayıcı yüksekliğini satırlara paylaştırır, yani öğeler bir grup olarak ortada toplanmaz, her biri kendi satırının ortasında durur. Grubu ortada toplu tutmak istiyorsanız place-content-center kullanın; iki sınıfın farkı hizalama yazısında örnekle gösteriliyor.

Tarif 3: mx-auto ile yatay ortalama

Sayfa içeriğini ortada, okunabilir bir genişlikte tutmak için flex ya da grid gerekmez. Blok bir öğenin genişliğini sınırlayıp iki yandaki kenar boşluğunu auto yapmak yeterlidir:

<div class="mx-auto max-w-md text-center">
  <h1>Başlık</h1>
  <p>Ortalanmış metin bloğu</p>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .mx-auto {
    margin-inline: auto;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .text-center {
    text-align: center;
  }
}

Üç sınıf üç ayrı iş yapar. max-w-md kutunun genişliğini varsayılan temada 28rem olan --container-md ile sınırlar. mx-auto margin-inline: auto yazar ve kalan yatay boşluğu iki yana eşit dağıtarak kutuyu ortalar. text-center ise kutunun içindeki satırları ortalar. Bu yöntemin en sık hatası genişliği unutmaktır: genişliği sınırlanmamış bir blok öğe zaten satırın tamamını kaplar ve paylaştırılacak boşluk kalmaz. Aynı nedenle satır içi öğelerde (span, a) mx-auto işe yaramaz; önce öğeyi block yapmanız ve genişliğini belirlemeniz gerekir. Sayfa genelinde bu kalıp için container sınıfı yazısına bakabilirsiniz.

Tarif 4: absolute inset-0 m-auto

Bir rozeti, yükleniyor simgesini ya da oynat butonunu bir resmin veya kartın tam ortasına bindirmek için konumlandırma kullanılır. İlk tarif kenar boşluğunun otomatik hesaplanmasına dayanır:

<div class="relative h-64">
  <div class="absolute inset-0 m-auto size-fit">Rozet</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: 0px;
  }
  .m-auto {
    margin: auto;
  }
  .size-fit {
    width: fit-content;
    height: fit-content;
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
}

relative kapsayıcıyı konum referansı yapar. inset-0 öğeyi dört kenardan da sıfır uzaklığa çeker; size-fit genişliği ve yüksekliği içerik kadar tutar, m-auto ise kalan boşluğu dört yana eşit dağıtır. Boyut sınıfı olmadan öğe inset-0 yüzünden tüm kapsayıcıyı kaplar ve ortalanacak bir şey kalmaz; bu yüzden size-fit ya da size-16 gibi bir boyut şarttır.

Tarif 5: top-1/2 left-1/2 ve -translate-1/2

İkinci konumlandırma tarifi öğeyi önce sol üst köşesi merkeze gelecek şekilde yerleştirir, sonra kendi boyutunun yarısı kadar geri çeker:

<div class="relative h-64">
  <div class="absolute top-1/2 left-1/2 -translate-1/2">Pencere</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .-translate-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}

top ve left yüzdeleri kapsayıcının boyutuna, translate yüzdeleri ise öğenin kendi boyutuna göre hesaplanır; bu yüzden öğenin genişliğini bilmeden tam ortaya oturur. İnternetteki pek çok örnekte bu tarif -translate-x-1/2 -translate-y-1/2 olarak iki sınıfla yazılır. v4.3.5'in canonicalize komutu bu ikiliyi tek sınıfa indirir:

$ tailwindcss canonicalize -- "-translate-x-1/2 -translate-y-1/2"
-translate-1/2

Komutta -- ayıracı gerekli: eksiyle başlayan argümanı CLI aksi halde bir seçenek sanıyor ve yardım metnini basıyor. Bu tarifin bir yan etkisi var: çıktıda görüldüğü gibi sınıf --tw-translate-x ve --tw-translate-y değişkenlerini ayarlıyor. Aynı öğeye başka bir translate sınıfı (örneğin hover durumunda kaydırma) eklerseniz o sınıf da aynı değişkenleri yazar ve ortalama kayar. Dönüşüm sınıflarının ayrıntıları transform yazısında anlatılıyor. Sabit bir modal pencereyi ekranın ortasında tutmak istiyorsanız absolute yerine fixed kullanırsınız; o zaman referans kapsayıcı değil görüntü alanı olur.

Tarif 6: flex kapsayıcısında m-auto

Flex kapsayıcısının tek çocuğuna m-auto vermek de onu iki eksende ortalar:

<div class="flex h-40">
  <button class="m-auto">Tek öge</button>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .m-auto {
    margin: auto;
  }
  .flex {
    display: flex;
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
}

Flex öğelerinde otomatik kenar boşlukları artan alanı emer; dört yanda da auto olunca öğe ortada kalır. Bu tarif, hizalamayı kapsayıcıya değil öğeye bağlamak istediğinizde işe yarar. Aynı ilke ile tek bir kenara auto vererek öğeyi bir uca itebilirsiniz: ms-auto öğeyi satırın sonuna gönderir. canonicalize da mx-auto my-auto ikilisini m-auto'ya indiriyor. Kenar boşluğu sınıfları padding ve margin yazısında anlatılıyor.

Tam ekran modal: fixed ve place-items-center

Konumlandırma ile grid'i birleştirirsek, ekranın ortasında duran ve içeriği uzasa bile kenarlara yapışmayan bir modal katmanı elde ederiz:

<div class="fixed inset-0 z-50 grid place-items-center p-4">
  <div class="w-full max-w-md">Modal içeriği</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .fixed {
    position: fixed;
  }
  .inset-0 {
    inset: 0px;
  }
  .z-50 {
    z-index: 50;
  }
  .grid {
    display: grid;
  }
  .w-full {
    width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .place-items-center {
    place-items: center;
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
}

Dış katman fixed inset-0 ile görüntü alanının tamamını kaplar ve z-50 ile diğer içeriğin üstüne çıkar. grid place-items-center içteki kutuyu ortalar. İç kutu w-full max-w-md ile dar ekranda tam genişlikte, geniş ekranda en fazla 28rem olur; dış katmandaki p-4 ise küçük ekranda kutunun ekran kenarına değmemesini sağlar. Bu yaklaşımda translate hesabına gerek kalmaz. Katman sırası ve z-* sınıfları position yazısında anlatılıyor.

Küçük ölçekte ortalama: simge ve metin

Ortalama yalnızca sayfa düzeyinde gerekmez; bir butondaki simgeyi yazıyla aynı hizaya getirmek de bir ortalama işidir. Burada inline-flex kullanmak, bağlantının metin akışında kalmasını sağlar:

<a class="inline-flex items-center gap-2" href="#indir">
  <svg class="size-4" aria-hidden="true"></svg>
  İndir
</a>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .inline-flex {
    display: inline-flex;
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .items-center {
    align-items: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
}

items-center 1rem'lik simgeyi metin satırıyla dikeyde ortalar, gap-2 araya 0.5rem koyar. Metnin taban çizgisine hizalamak isterseniz items-baseline deneyebilirsiniz. Ortalamanın ekrana göre değişmesi de sık bir ihtiyaçtır: text-center md:text-left başlığı mobilde ortalar, 48rem ve üstünde sola yaslar. v4.3.5 bunu .text-center kuralı ve @media (width >= 48rem) içinde text-align: left yazan .md\:text-left kuralı olarak derledi.

İçerik kapsayıcıdan büyükse

Ortalama tarifleri içerik kapsayıcıya sığdığı sürece sorunsuz çalışır. İçerik büyüdüğünde ise iki tuzak ortaya çıkar. Birincisi yüksekliğin sabitlenmesidir: kapsayıcıya h-dvh ya da h-screen verirseniz yükseklik ekranla sınırlanır ve uzun içerik kutunun dışına taşar. min-h-dvh ise en az ekran yüksekliğini garanti eder ama içerik uzadıkça kutunun da büyümesine izin verir; bu yüzden tam sayfa ortalamalarda genellikle min-h-* sürümü daha güvenlidir.

İkinci tuzak, ortalanan içeriğin iki yana birden taşmasıdır. justify-center ve items-center ile ortalanan bir öğe kapsayıcıdan büyükse, taşma hem başlangıç hem bitiş tarafına doğru olur ve başlangıç tarafındaki kısım kaydırılarak bile görülemeyebilir. Resmî belgeler bunun için güvenli sürümleri sunar: justify-center-safe ve items-center-safe, yer yetmediğinde öğeyi başlangıca yaslar. Dar ekranda boyu uzayabilen bir giriş formu ya da modal gibi durumlarda bu sürümleri tercih etmek, içeriğin bir kısmının ekran dışında kalmasını önler. Grid tarafında aynı amaçla place-items-center-safe ve place-content-center-safe bulunur.

Hangi tarifi seçmeli?

Sık yapılan hatalar

• Dikey ortalamada yüksekliği unutmak. Kapsayıcının yüksekliği içerik kadarsa dikeyde ortalanacak boşluk yoktur. min-h-dvh, h-64 gibi bir yükseklik verin.
• Sınıfı çocuğa vermek. items-center, justify-center ve place-items-center kapsayıcının sınıflarıdır. Ortalanacak öğeye verirseniz o öğenin kendi çocuklarını ortalar.
• text-center ile kutu ortalamayı beklemek. text-center satır içi içeriği ortalar; blok bir kutunun konumunu değiştirmez.
• relative'i unutmak. absolute öğe, konumlandırılmış en yakın üst öğeye göre yerleşir. Kapsayıcıda relative yoksa öğe sayfanın başka bir yerine kayabilir.
• flex-col ekleyince ekseni unutmak. Tariflerden yalnızca birini (örneğin sadece justify-center) kullanıyorsanız flex-col eklediğinizde ortalama yön değiştirir.

Sık Sorulan Sorular

Tailwind'de div'i dikey olarak nasıl ortalarım?

Kapsayıcıya yükseklik verip flex items-center (yatay flex'te dikey eksen çapraz eksendir) ya da grid place-items-center kullanın. Örneğin flex min-h-dvh items-center içeriği ekran yüksekliğinde dikeyde ortalar.

min-h-screen mi, min-h-dvh mi?

v4.3.5'te min-h-screen 100vh, min-h-dvh 100dvh üretir. Mobil tarayıcılarda değişen görüntü alanı yüksekliğini izlemek istiyorsanız dvh sürümünü seçin; birimler boyut yazısında karşılaştırılıyor.

Birden fazla öğeyi alt alta ortalamak için hangisi?

flex flex-col items-center justify-center öğeleri dikey bir grup olarak ekranın ortasında toplar ve gap-* ile aralarını ayarlamanıza izin verir. grid place-content-center de benzer sonuç verir: izlerin tamamı ortada toplanır. grid place-items-center ise öğeleri yüksekliği paylaşan ayrı satırlara dağıtır; grup olarak toplu görünmesini istiyorsanız bu tarif uygun değildir.

Ortalanmış öğe dar ekranda neden kesiliyor?

Büyük olasılıkla öğe kapsayıcıdan büyüktür ve iki yana birden taşmaktadır. Kapsayıcıya sabit h-* yerine min-h-* verin, ortalama sınıflarının -safe sürümlerini deneyin ve kapsayıcıya p-4 gibi bir iç boşluk ekleyerek öğenin ekran kenarına yapışmasını önleyin.

mx-auto neden çalışmıyor?

Genellikle öğenin genişliği sınırlanmamıştır ya da öğe satır içidir. Bloğa max-w-md veya w-1/2 gibi bir genişlik verin; span gibi öğeleri önce block yapın.

-translate-x-1/2 -translate-y-1/2 yerine ne yazmalıyım?

v4.3.5'in canonicalize komutu bu ikiliyi -translate-1/2 olarak sadeleştiriyor. İkisi de aynı değişkenleri ayarlar; tek sınıf daha kısadır.

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: Tailwind CSS öğrenme rehberi · Tailwind flexbox sınıfları · grid hizalama sınıfları · position ve inset sınıfları · width, height ve size · Tailwind CSS sıfırdan rehber