CSS ile içeriği yatayda ve dikeyde ortalama

Div içeriklerini yatayda ve dikeyde ortalamak için yaygın olarak kullanılan method padding olsa da bazi fluid yapılarda özellikle responsive yapılarda bu çok sağlıklı çalışmamaktadır. Flexbox özelliği ile esnek divler oluşturmak oldukça kolay oluyor ve float/clear kullanımını minimuma indirdiği için responsive tasarımlardaki layout bozukluklarının da büyük ölçüde önüne geçiyor.

Flex yapısını ilerleyen zamanlarda daha detaylı anlatacağım alacağı parametreler ile. Şimdilik örnek ile idare edin. 🙂

[codepen_embed height=”265″ theme_id=”light” slug_hash=”mAQGLX” default_tab=”css,result” user=”alicanatas”]See the Pen mAQGLX by Ali (@alicanatas) on CodePen.[/codepen_embed]

Örnek kodda; align-items: center; dikeyde konumlandırmayı belirtiyor., justify-content: center; ise yatayda ortalama için kullanıyoruz. Tabi bu elementin esnek olduğunu belirtmek için display:flex tanımlamasını başta yapmalıyız.