Başka bir div'in içine eklenen bir div'i ortalamak istiyorum.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Şu anda kullandığım CSS bu.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Gördüğünüz gibi, şu anda kullandığım yaklaşım innerDiv
in genişlik ve yükseklik değerlerine bağlı. genişlik/yükseklik değişirse, margin-top
ve margin-left
değerlerini değiştirmem gerekecek. innerDiv
i boyutundan bağımsız olarak her zaman ortalamak için kullanabileceğim genel bir çözüm var mı?
margin:auto` kullanarak innerDiv'i yatay olarak ortaya hizalayabileceğimi anladım. peki ya dikey olarak ortaya hizalama?
Ortaya dikey hizalama işe yarar, ancak üst öğenizde table-cell
ve alt öğede inline-block
kullanmanız gerekecektir.
Bu çözüm IE6 & 7'de çalışmayacaktır.
Sizinki bunlar için daha güvenli bir yoldur.
Ancak sorunuzu CSS3 ve HTML5 ile etiketlediğiniz için modern bir çözüm kullanmanın sakıncası olmadığını düşünüyordum.
Klasik çözüm (tablo düzeni)
Bu benim orijinal cevabımdı. Hala iyi çalışıyor ve en geniş desteğe sahip çözüm. Tablo düzeni işleme performansınızı etkileyecektir, bu nedenle daha modern çözümlerden birini kullanmanızı öneririm.
[İşte bir örnek][3]
Test edildiği yer:
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Modern çözüm (dönüşüm)
Dönüşümler artık oldukça iyi desteklendiğinden bunu yapmanın daha kolay bir yolu vardır.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
[Demo][5]
♥ benim favori modern çözümüm (flexbox)
Flexbox'ı giderek daha fazla kullanmaya başladım şu anda da iyi destekleniyor En kolay yol bu.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Daha fazla örnek ve olasılık: Tüm yöntemleri tek bir sayfada karşılaştırın
Bu sorunun bir yıl önce oluşturulduğunu biliyorum... Her neyse, CSS3 sayesinde div'i div içinde dikey olarak kolayca hizalayabilirsiniz (örnek orada
)<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>
div
{
display:-moz-box;
-moz-box-align:center;
}