CSS ile Ekranın Tam Ortası

Web tasarımında çok sık karşımıza çıkan sayfayı ortalama sorunu CSS ile bile çözülememekteydi.

Browserların çoğu versiyonuyla uyumlu bu CSS kodu sayesinde  ortalama problemi ortadan kalkıyor. Özellikle uyumluluk sağlanmak istenen browserlara bakalım : Safari, IOS, Android, WebKit Görüntüleyicileri, Firefox, IE10, Chrome 21+, Opera 12.1, Firefox 22+,

ÖRNEĞİ GÖRÜNTÜLE

Başlayalım

Ben örneği basit bir HTML dosyası üzerinde kendi logomuzu yayınlayarak hazırladım. Kodlara geçelim ;

CSS Kodları

html {height:100%;}
body {
height:100%;

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center; -moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center; -moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

HTML Kodları 

<img src="https://www.adobewordpress.com/wp-content/uploads/2012/10/footer_logo.png">

Notlar

Bu konuya önce değinip popüler browserlara uyumlu bir kod dizimi hazırlamıştım. İlgili başlık aşağıda ;

Divleri Ortalamak