CSS ile Dikey Ortalama
3 satır CSS kodu ile herhangi bir elementi dikey alan içerisinde ortalamak kim istemez ki ? Yüksekliği belirlenmemiş herhagi bir alan içerisine, herhangi bir nesneyi “transform: translateY” yardımıyla ortalayabiliyoruz. “Transform” CSS değeri her ne kadar bir elementin rotasyonunu değiştirmek veya scale etmek için kullanılsa da “translateY” ile elementlerin dikey değerini düzenleyebiliyoruz.
Aşağıdaki kod bloğu yardımıyla dikey ortalamayı yapabilir, hatta IE9’da bile çalıştırabilirsiniz:
[code lang=“css”] .element { position: relative; top: 50%; transform: translateY(-50%); } [/code]
Kurcalamak isteyenler için de :
See the Pen Vertical center with only 3 lines of CSS by Ibrahim Nergiz (@PhyesiX) on CodePen.