CSS html elemanlarını ve nesneleri ortalamak

Merhabalar bugün sizlere CSS tasarım yaparken çok sık kullanacağımız bir Div ortalama veya herhangi bir elemanı ortalamayı göstereceğim , öğreteceğim yöntem sayesinde CSS ile html elemanlarını ekranın tam ortasına veya bulunduğu kapsayıcı divin tam ortasına yerleştirebileceksiniz.

Öncelikle iki adet div oluşturuyoruz bunlardan biri kapsayıcı diğer ise ortalanacak olan div. 
 

<div class="kapsam">
	<div class="content"></div>	
</div>

Bu aşamadan sonra  kapsayıcı olan elemanın position özelliğini relative olarak güncelliyoruz , bu aşamada benim kapsayıcı elemanım 'kapsam' sınıflı div elemanı olduğu için ben kapsam sınıfındaki divi bu işlem için kullanacağım. Burada dikkat edilmesi gereken relative özelliğidir bu özellik sayesinde kapsayıcı divin içindeki eleman aldığı position değerlerinde sınır olarak kapsam divini baz alacaktır.

div.kapsam{
	width: 400px;
	height: 400px;
	background-color:tomato;
	position: relative;
}

Bu aşamadan sonra ortalancak divimizin position özelliğine absolute veriyoruz bu sayede artık top ve left değerlerinde istediğimiz gibi oynama yapabilecek duruma geliyoruz

div.content{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	border:1px solid dodgerblue;
}

Burada top değerini 50%  olarak değiştiriyoruz bu sayede içerisinde bulunduğu divin yükseklik değerinin yarısı kadar aşağı inecek , aynı şekilde left değerine de 50% değeri verince kapsam divinin genişlik değerinin yarısı kadar sağa ilerleyecek , ancak aşağıdaki gibi bir görünüm elde edeceğiz.

Yukarıda göründüğü gibi bir görünüm temel mantıkta doğru ancak problem şurada bizim ortalamaya çalıştığımız elemanın da bir genişlik ve yükseklik değeri var , biz ortalamaya çalışırken temel mantıkta ortaladık çünkü divimizin sol üst köşesi kapsayıcı divin tam orta yani merkez noktasına geldi ancak görüntü olarak ortalanmış olarak algılayamıyoruz bu nedenle transform özelliğini kullanacağız.
 

transform: translate(-50% , -50%);

Bu kodun açıklaması şu : Eklendiği elemanın Y ekseninde kendi yüksekliğinin yarısı kadar yukarı çıkar ve aynı şekilde X ekseninde kendi genişliğinin yarısı kadar sola kaydır ve bu sayede ortalanacak divimizin merkez noktası kapsayıcı divin merkez noktasıyla birleşmiş oluyor ve bu sayede görsel olarak da divimiz ortalanmış oluyor:

Göreceğiniz üzere div görsel olarak da tam olarak ortalandı , şimdi sizlere mantığınızı daha iyi kavramanız adına bir canlı örnek bırakıyorum bu sayede transform: translate(-50% , -50%);   kodunun ne işe yaradığını da tam olarak kavramış olacaksınız