Поравнање блок елемената у 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;
}

Поновите страну према узору, тако да зелени блокови буду постављени у центру свог родитеља: