Bir div’i yatay olarak nasıl ortalarım?

CSS kullanarak başka bir div’in içinde olan div elementini yatay olarak nasıl ortalayabilirim?

<div id="dis">
  <div id="ic">Foo foo</div>
</div>

Birkaç yolu var.

Aşağıdaki CSS’i iç div’e uygulayın:

#ic {
  width: 50%;
  margin: 0 auto;
}

Tabii ki, width değerini 50% yapmak zorunda değilsiniz. Dış div’den daha az herhangi bir genişlik çalışacaktır. Zaten asıl işi margin: 0 auto ile yapıyoruz.

Internet Explorer 8’i de hedefliyorsanız, bunun yerine aşağıdakini kullanmak daha iyi olabilir:

#ic {
  display: table;
  margin: 0 auto;
}

İç eleman merkezini yatay olarak ortalayacak ve width için belirli bir ayar yapmadan da çalışacaktır.

Aşağıdaki örneği deneyebilirsiniz:

#ic {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#dis {
  border: 1px solid red;
  width:100%
}

<div id="dis">
  <div id="ic">Foo foo</div>
</div>

flexbox kullanarak yatay ve dikey ortalamak da çok kolaydır:

#ic {  
  border: 1px solid black;
}

#dis {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

<div id="dis">
  <div id="ic">Foo foo</div>
</div>

Div’i dikey olarak ortalamak için align-items: center özelliğini kullanın.

CSS 3 için en iyi yaklaşım

Kutu modeli:

#dis {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#ic {
  width: 50%;
}

<div id="dis">
  <div id="ic">Foo foo</div>
</div>

Kullanım amacınıza göre box-orient, box-flex, box-direction özelliklerini de kullanabilirsiniz.

Aşağıdaki bağlantılardan öğeleri ortalama hakkında daha fazla bilgi edinebilirsiniz:

• Bağlantı 2
• Bağlantı 3
• Bağlantı 4

Aşağıdaki yazı ise kutu modelinin neden en iyi yaklaşım olduğunu açıklar:

• W3C kutu modeli neden daha iyi kabul edilir?