CSS Ortalama Yöntemi, CSS’de bir div’i ortalamak için basit css tekniği, flex ve grid kullanarak nasıl yapabileceğimizi göreceğiz.
Üzerinde çalışacağımız örnek html kodu şöyle
CSS’in basit tekniği ile nasıl ortalanabileceğini görelim. Bu CSS tekniğinde position absolute kullanıyor olacağız.
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.👋 Bir sonraki makalede görüşmek dileğiyle.

1 2 3 | <div class="container"> <div class="content">Ben ortalandım</div> </div> |
Absolute
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .container { position: relative; height: 200px; background-color: #191919; } .content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: white; padding: 10px; } |
Demo
Flex
1 2 3 4 5 6 7 8 9 10 11 12 | .container { display: flex; justify-content: center; align-items: center; height: 200px; background-color: #191919; } .content { background-color: white; padding: 10px; } |
Grid
1 2 3 4 5 6 7 8 9 10 11 | .container { display: grid; place-items: center; height: 200px; background-color: #191919; } .content { background-color: white; padding: 10px; } |
Demo
Sonuç
Standart Absolute yöntemi, flex ve grid yöntemlerini kullanarak css ile bir div nasıl ortalanır özetlemeye çalıştım. Umarım artık css’de yatay ve dikey ortalama için bir sorun yaşamayacaksınız.📚 CSS Ortalama Yöntemi İle Benzer Makaleler
📚 Kaynaklar
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.👋 Bir sonraki makalede görüşmek dileğiyle.