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.

3 CSS Ortalama Yöntemi Nedir? Bir Div Nasıl Ortalanır?

Üzerinde çalışacağımız örnek html kodu şöyle

<div class="content">Ben ortalandım</div>

</div>

CSS’in basit tekniği ile nasıl ortalanabileceğini görelim. Bu CSS tekniğinde position absolute kullanıyor olacağız.

Absolute

İçerik gizle

1. Absolute

1.1. Demo

2. Flex

3. Grid

3.1. Demo

4. Sonuç

5. 📚 CSS Ortalama Yöntemi İle Benzer Makaleler

6. 📚 Kaynaklar

.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

.container {

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: #191919;

}

.content {

background-color: white;

padding: 10px;

}

Grid

.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

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

✍ 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.

5/5 - (3 votes)

Kategoriler

3 CSS Ortalama Yöntemi Nedir? Div Nasıl Ortalanır?

Absolute

Demo

Flex

Grid

Demo

Sonuç

📚 CSS Ortalama Yöntemi İle Benzer Makaleler

📚 Kaynaklar

Bir cevap yazın Cevabı iptal et