Css kutu ortalama

Merhaba, bu yazımda cssde herhangi bir yazıyı veya tagı nasıl yükseklik ve genişlik biçiminden ortalayacağımızı göstereceğim.

Bundan önce çoğumuz çeşitli hilelerle bu işlemi yapıyorduk. Bu hilelerin bazıları şu şekildeydi: ilk önce bütün içerikleri kapsayan bir div açıyorduk, onun içine bir div daha açıp bilgileri içerisine yazıyorduk ve çok fazla gereksiz css kodu yazıyorduk.

sözü kısa kesersek. Html Kodlar:

Css Kodları:

Bu kadar css kodunun içinden sadece kırmızı ile işaretli olan kodlar ortala maktadır. Displayi flex olarak belirledikten sonra justify-content :center veriyoruz ve yatay olarak ortalıyoruz, align-items:center vermek ile dikey olarak ortalıyoruz. Buradan dikkat etmemiz gereken ise bu kodlar verdiğiniz tagın içerisindeki kodu verdiğiniz tagın boyutlarına göre ortalar.

Ön izleme;