
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.
Gerçekten çok faydalı bir bilgi teşekkürler