İç içe div'lerden içte yer alanını dıştakine göre dikey olarak ortalamak, yatay olarak ortalama işleminden biraz daha karışık olduğu için bir örnek ile bu konuda bilgi vermek istedim.
İçerideki div'i ya da div içinde yer alan görseli dikey olarak ortalayabilmek için birden fazla seçeneğimiz var. En sık kullanılan iki yaklaşımı aşağıdaki gibi paylaşıyorum.
Not: vertical-align: middle çalışmıyor ise için display: table kullanıyor olmanız gerekir.
display: table
<div class="dis">
<div class="ic">
<h2>Merhaba reitix</h2>
</div>
</div>
.dis { display: table; width:100%; border: 1px solid black;}
.ic { display: table-cell; vertical-align: middle; }
display: flex
.dis {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
}
Editör editi: benzer içerikli bazı diğer yazılar için;
bkz: HTML ve CSS ile Yazının Başına ve Sonuna Karakter Eklemek (Before After)
bkz: CSS'te Class Seçicileri ile HTML Elemanlarını Seçmek
bkz: Html ve Css ile bütün internet sitesini siyah beyaz yapmak
bkz: HTML ve CSS ile kayan yazı yapmak
bkz: CSS ile HTML içerik eklemek
bkz: Mouse hover yaptığında tooltip yerine görsel göstermek (HTML+CSS+Javascript)