Позиционирање на блок елементи во CSS

Својството margin не се користи само за задавање на растојанија, туку и за центрирање на блок елементи. За ова, десното и левото растојание треба да се зададат како auto.

Во примерот подолу внатрешниот блок ќе се постави во центар:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

Имајте предвид дека на овој начин може да се центрираат само блок елементи, само хоризонтално и само ако им е зададена ширина.

Ако ни требаат различни горни и долни растојанија margin, тогаш може да се напише вака:

.child {
	margin: 30px auto 10px auto;
}

Може да се препише и преку три вредности: првата ќе го зададе горното растојание, третата - долното, а втората ќе ја зададе вредноста auto за десното и левото растојание:

.child {
	margin: 30px auto 10px;
}

Повторете ја страницата според примерот, правејќи така што зелените блокови ќе се позиционираат во центар на својот родител: