Tüm tarayıcılar için bir div nasıl dikey olarak ortalanır?

CSS ile bir divi dikey olarak ortalamak istiyorum. Tablo veya JavaScript istemiyorum, sadece saf CSS istiyorum. Bazı çözümler buldum ama hepsinde Internet Explorer 6 desteği yok.

<body>
    <div>Div to be aligned vertically</div>
</body>

Internet Explorer 6 da dahil olmak üzere tüm büyük tarayıcılarda bir divi dikey olarak nasıl ortalayabilirim?

John Slegers
Edited question 2018ööp5öö11 Mayıs 2018 в 11:05
Programlama
cross-browser css alignment vertical-alignment centering
2008ösp57ös12 Aralık 2008 в 12:57
37 görünümler
Çözüm

Aşağıda, sabit genişlikli, esnek yükseklikli bir içerik kutusunu dikey ve yatay olarak ortalamak için oluşturabildiğim en iyi çok yönlü çözüm var. Firefox, Opera, Chrome ve Safari'nin son sürümleri için test edildi ve çalışıyor.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Dinamik İçerikle Çalışan Bir Örneği Görüntüleyin

Esnekliği test etmek için bazı dinamik içerikler oluşturdum ve bununla ilgili herhangi bir sorun gören olup olmadığını bilmek isterim. Ortalanmış kaplamalar için de iyi çalışmalıdır - lightbox, pop-up, vb.

Michał Woliński
Edited answer 2018ösp6ös17 Kasım 2018 в 5:06
Yorumlar (5)

Aslında dikey merkezleme için iki div'e ihtiyacınız var. İçeriği içeren div'in bir genişliği ve yüksekliği olmalıdır.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

İşte [sonuç][1]

Vadim Ovchinnikov
Edited answer 2017ööp53öö9 Temmuz 2017 в 9:53
Yorumlar (4)

Ne yazık ki - ancak şaşırtıcı olmayan bir şekilde - çözüm, olmasını arzu ettiğimizden daha karmaşıktır. Ayrıca ne yazık ki, dikey olarak ortalanmasını istediğiniz div'in etrafında ek div'ler kullanmanız gerekecektir.

Mozilla, Opera, Safari gibi standartlara uyumlu tarayıcılar için dış div'i tablo olarak ve iç div'i tablo hücresi olarak görüntülenecek şekilde ayarlamanız gerekir - bu şekilde dikey olarak ortalanabilir. Internet Explorer için, iç div'i dış div içinde tam olarak konumlandırmanız ve ardından üst kısmını %50 olarak belirtmeniz gerekir. Aşağıdaki sayfalar bu tekniği iyi bir şekilde açıklamakta ve bazı kod örnekleri de sunmaktadır:

JavaScript kullanarak dikey merkezleme yapmak için bir teknik de vardır. JavaScript & CSS ile içeriğin dikey hizalanması bunu göstermektedir.

Peter Mortensen
Edited answer 2018ösp12ös12 Mart 2018 в 12:12
Yorumlar (0)