Poravnavanje blok elemenata u CSS

Svojstvo margin se ne koristi samo za postavljanje odstupanja, već i za centriranje blok elemenata. Za to, desno i levo odstupanje treba postaviti na vrednost auto.

U primeru ispod, unutrašnji blok će biti centriran:

<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;
}

Imajte u vidu da na ovaj način možete centrirati samo blok elemente, samo horizontalno i samo ako im je zadata širina.

Ako su nam potrebna različita gornja i donja odstupanja margin, možemo napisati ovako:

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

Možete prepisati i kroz tri vrednosti: prva će postaviti gornje odstupanje, treća - donje, a druga će postaviti vrednost auto za desno i levo odstupanje:

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

Ponovite stranicu po uzorku, tako da zeleni blokovi budu postavljeni u centar svog roditelja: