Yüksekliği genel sayfa yüksekliğinden az olan tasarımlarda içerik alanının sayfaya hem yatay hem de dikey olarak ortalı olması istenir ya da en azından öyle daha güzel görünür. İçeriğin üste yapışık olması hez zaman istenen birşey değildir. Üstten boşluk vererek kısmi olarak bu sorun giderilebilir. Ama nihai çözüm bir blok elementi sayfaya dikey olarak ortalamatan geçer. Özellikle “Yapım Aşamasında” sayfalarında bu pek de güzel işimize yarar.

Yatay olarak ortalamayı margin {0 auto;} özelliğiyle kolayca yapabilirken dikey olarak ortalamak bu kadar basit değildir.

Tabi bunun için de kullanılan birçok yöntem var. Bu da o yöntemlerden sadece biri.

Bir yazıyı dikey olarak ortalamak istersek line-height (satır yüksekliği) özelliğini blok elementimizin yüksekliğine eşitleyerek sağlayabiliriz. Ama buradaki sorun şu: Tahmin edeceğiniz üzere sadece tek satır olmak zorunda. İkinci satırda bir o kadar yükseklik daha aşağıya atar. Ancak yazı bir inline elementtir. div gibi blok elementte bu özellik yemez.

Hadi artık nihai çözümü anlatayım.

Aşamalar şunlar:

  1. Varsayılan kenar boşluk değerini (margin) sıfırlayın.
  2. html ve body‘ye 100% yükseklik verin ki o yüksekliğe göre kendisini ortalayacak evlat.
  3. Ortalayacağımız blok elemente sabit bir yükseklik verin.
  4. Blok elemente position:relative özelliği ve top:50% ile üstten boşluk verin.
  5. Dengelemek için blok elementin yüksekliğinin yarısı kadar ters margin-top verin.

Sayfaya Ortalı Blok Element

CSS Kodu:

* {
  margin:0; /*Varsayılan değerleri sıfırlamamız gerekiyor.*/
}
html, body {
  height:100%;
  overflow:auto; /*IE7 ve altı sürümlerde kaydırma çubuğunun çıkmasını engellemek için*/
}
.blok {
  position:relative;
  top:50%;
  width:400px;
  height:300px;
  margin:-150px auto 0; /*Üstten verilen boşluğu dengelemek için yüksekliğin yarısını ters yöne veriyor*/
}

Eğer bunun içine de ortalı bir blok element koymak istersek onu da şu şekilde yaparız.

.icBlok {
  position:absolute;
  top:50%;
  left:50%;
  width:300px;
  height:200px;
  margin:-100px 0 0 -150px; /*Bu sefer yatay ortalamak için de genişliğin yarısının tersini vermeliyiz*/
}

position:absolute olduğu için margin:0 auto; çalışmaz. Bunun için soldan veya sağdan 50% verip bunu da genişliğin yarısının tersi kadar margin vererek dengelemeliyiz.

IE6 ve üzeri, FF3.6, Chrome 5, Safari 5, Opera 10.6’da denendi ve çalışıyor.

Örnek