Çalıştırılabilir CSS Dokümanları: Div ortalama

Q: Bir div hem yatayda hem dikeyde nasıl ortalanır?

Ebeveyni grid yap ve içeriğini ortala: .parent { display: grid; place-items: center; }. Flexbox sürümü display: flex; justify-content: center; align-items: center; şeklindedir. İki durumda da ebeveynin div'den uzun bir yüksekliği olmalıdır.

Q: Bir div yalnızca yatayda nasıl ortalanır?

Ona bir genişlik ve otomatik yan margin'ler ver: .box { width: 300px; margin: 0 auto; } (esnek bir blok için max-width). Mantıksal özelliklerde bunun karşılığı margin-inline: auto'dur.

Q: Bir div'i ortalamanın en kolay yolu nedir?

Ebeveyne display: grid; place-items: center;: iki bildirim, iki eksen, çocuğun boyutu ne olursa olsun. Ebeveyn aynı zamanda başka öğeleri bir satırda diziyorsa flexbox kullan.

Q: Bir div'in içindeki metin nasıl ortalanır?

Metin ve satır içi içerik için div'e text-align: center ver. Div'in kendisini ortalamak ile içindeki metni ortalamak ayrı işlerdir.

Kısa cevap

Bir div'i ebeveyninin içinde hem yatayda hem dikeyde ortalamak için ebeveyni grid yap ve içeriğini ortala:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

Bu her boyuttaki çocuk için çalışır ve çocuğun kendisine hiçbir şey vermeyi gerektirmez. Aşağıda altı yöntem yan yana. Her kutu çizildikten sonra kendini ölçüyor ve merkezinin ebeveynin merkezinden ne kadar uzak olduğunu yazdırıyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Altısı da iki eksende 0px bildiriyor (sahnenin 1px kenarlığı her kenarda eşit olduğu için merkezi kaydırmıyor). Bir kutunun genişliğini ya da metnini değiştir ve tekrar çalıştır: sabit bir boyuta bağlı olmayan yöntemler 0'da kalır.

Hangi yöntemi kullanmalı

Yöntem	Ortaladığı	Çocuğun sabit boyutu gerekir mi?	En uygun olduğu yer
Grid `place-items: center`	İki eksen	Hayır	Varsayılan seçim: bir kutudaki tek çocuk
Flexbox `justify-content` + `align-items`	İki eksen	Hayır	Grup olarak ortalanan bir öğe satırı ya da sütunu
Flex ya da grid ebeveynde `margin: auto`	İki eksen	Hayır	Kardeşleri farklı dizilirken tek bir öğeyi ortalamak
`margin: 0 auto`	Yalnızca yatay	Bir `width` ya da `max-width`	Normal akıştaki sayfa kapsayıcıları, makaleler, formlar
Absolute + `translate(-50%, -50%)`	İki eksen	Hayır	Diğer içeriğin üstündeki katmanlar, rozetler ve modal'lar
Absolute + `inset: 0; margin: auto`	İki eksen	Evet, genişlik ve yükseklik	Sabit boyutlu diyaloglar
Bir blokta `align-content: center`	Dikey	Hayır	Ebeveynin display değerini değiştirmeden dikey ortalama

Yöntem 1: flexbox

Flexbox iki özellikle iki eksende ortalar. justify-content ana ekseni (bir satırda yatay), align-items ise çapraz ekseni yönetir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Birkaç çocukla flexbox onları bir satırda tutarak grup olarak ortalar. Üç öğeyi tek bir ortalanmış sütunda üst üste dizecek olan grid'i geçtiği yer burasıdır. Bütün hizalama değerlerini justify-content sayfası anlatıyor.

Yöntem 2: grid

place-items: center, align-items: center artı justify-items: center için bir kısa yazımdır. Tek çocuklu bir grid kapsayıcısında o çocuğu iki yönde de ortalar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

height yerine min-height, kart 180px'ten uzun olursa kartın taşması yerine ebeveynin büyümesine izin verir.

Yöntem 3: margin: 0 auto (yatay)

Genişliği kapsayıcısından küçük olan bir blok element, otomatik yan margin'lerle yatayda ortalanabilir. Tarayıcı boş alanı iki taraf arasında eşit paylaştırır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

İkinci kutu bütün genişliği dolduruyor, bu yüzden boş alan yok ve hiçbir şey kıpırdamıyor. margin: 0 auto'nun "çalışmamasının" olağan nedeni budur. Ayrıca normal akışta yalnızca yatayda ortalar; orada dikey auto margin'ler 0 olur. Yine de bir flex ya da grid ebeveynin içinde margin: auto iki yönde de ortalar; yukarıdaki karşılaştırmadaki üçüncü kutu budur.

Yöntem 4: absolute konum ve transform

Element diğer içeriğin üstünde durmak zorundaysa (bir fotoğraftaki rozet, sayfanın üstündeki bir modal), onu %50'ye absolute olarak konumlandır ve kendi boyutunun yarısı kadar geri çek:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% elementin sol üst köşesini merkeze koyar. translate() içindeki yüzdeler elementin kendi boyutuna göredir, bu yüzden -50% onu genişliği ve yüksekliği ne olursa olsun yarısı kadar geri taşır. Ebeveyn konumlandırılmış olmalıdır (position: relative), yoksa element bunun yerine sayfada ortalanır. Konumlandırmayı position sayfası anlatıyor.

Boyutu bilinen elementler için bir çeşit: position: absolute; inset: 0; margin: auto; artı bir width ve height. Otomatik margin'ler dört taraftaki boşluğu paylaşır.

Yöntem 5: normal bir blokta align-content

align-content: center artık yalnızca flex ve grid kapsayıcılarda değil, sıradan blok kapsayıcılarda da çalışıyor. Çocukların nasıl dizildiğini değiştirmeden içeriği dikeyde ortalar:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Güncel Chrome, Firefox ve Safari'de desteklenir. Eski tarayıcılar onu yok sayar, bu yüzden onları desteklemen gerekiyorsa grid kullan.

Bütün ekranda ortalamak

Kaydırmadan bağımsız olarak bir diyaloğu viewport'ta ortalamak için sabit, tam ekran bir katmanı grid ile birleştir:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Bütün bir sayfanın içeriğini dikeyde ortalamak için ebeveynde 100vh yerine min-height: 100dvh kullan: telefonlarda 100vh tarayıcı araç çubuklarının arkasındaki alanı da kapsar, bu yüzden "merkez" fazla aşağıda kalır.

Metni ortalamak farklı bir iştir

Yukarıdaki her şey bir kutuyu ortalıyor. Bir kutunun içindeki metni ortalamak için HTML metin ortalama sayfasında gösterildiği gibi ona text-align: center ver. Çoğu zaman ikisine de ihtiyacın olur: kartı ortalamak için grid, içindeki satırları ortalamak için text-align.

Sık yapılan hatalar

Yüksekliği olmayan bir ebeveyn. Dikey ortalama boş alan ister; içeriğine göre küçülen bir ebeveynde hiç yoktur.
Tam genişlikteki bir blokta margin: 0 auto. Önce ona bir width ya da max-width ver.
Normal akışta dikey ortalamak için margin: auto. Orada dikey auto margin'ler 0'dır; flex ya da grid kullan.
Konumlandırılmış bir ebeveyn olmadan absolute ortalama. Element kutuda değil sayfada ortalanır.
Çocukta align-items: center. Hizalama özellikleri margin: auto ve align-self dışında ebeveyne (flex ya da grid kapsayıcıya) verilir.
Bir bloğu ortalamak için text-align: center. Bir blok çocuğu değil, satır içi içeriği (metin, resimler, inline-block çocuklar) ortalar.

Sıkça Sorulan Sorular

Bir div hem yatayda hem dikeyde nasıl ortalanır?

Ebeveyni grid yap ve içeriğini ortala: .parent { display: grid; place-items: center; }. Flexbox sürümü display: flex; justify-content: center; align-items: center; şeklindedir. İki durumda da ebeveynin div'den uzun bir yüksekliği olmalıdır.

Bir div yalnızca yatayda nasıl ortalanır?

Ona bir genişlik ve otomatik yan margin'ler ver: .box { width: 300px; margin: 0 auto; } (esnek bir blok için max-width). Mantıksal özelliklerde bunun karşılığı margin-inline: auto'dur.

margin: 0 auto div'imi neden ortalamıyor?

Div'in kapsayıcısından küçük bir genişliği yoktur, bu yüzden paylaştırılacak boş alan yoktur (bir blok varsayılan olarak tam genişliği doldurur). width ya da max-width ver. Satır içi elementlerde de hiçbir şey yapmaz ve normal akışta asla dikeyde ortalamaz.

Div'im neden dikeyde ortalanmıyor?

Ebeveyn yalnızca içeriği kadar uzundur, bu yüzden içinde ortalanacak fazladan boşluk yoktur. Ebeveyne bir yükseklik (ya da min-height) ver, sonra grid ya da flexbox ile ortala.

Bir div'i ortalamanın en kolay yolu nedir?

Ebeveyne display: grid; place-items: center;: iki bildirim, iki eksen, çocuğun boyutu ne olursa olsun. Ebeveyn aynı zamanda başka öğeleri bir satırda diziyorsa flexbox kullan.

Bir div'in içindeki metin nasıl ortalanır?

Metin ve satır içi içerik için div'e text-align: center ver. Div'in kendisini ortalamak ile içindeki metni ortalamak ayrı işlerdir.

İlgili kavramlar