Alinierea elementelor bloc în CSS

Proprietatea margin este folosită nu doar pentru a seta marginile, ci și pentru centrarea elementelor bloc. Pentru a face acest lucru, marginile dreapta și stânga trebuie setate la valoarea auto.

În exemplul de mai jos, blocul interior va fi centrat:

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

Rețineți că în acest fel puteți centra doar elementele bloc, doar orizontal și numai dacă au o lățime setată.

Dacă avem nevoie de marginile superioară și inferioară diferite margin, atunci putem scrie astfel:

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

Puteți rescrie și cu trei valori: prima va seta marginea superioară, a treia - marginea inferioară, iar a doua va seta valoarea auto pentru marginile dreapta și stânga:

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

Repetați pagina conform modelului, făcând astfel încât blocurile verzi să fie poziționate în centrul părintelui lor: