Justering av blockelement i CSS

Egenskapen margin används inte bara för att sätta marginaler, utan också för att centrera blockelement. För detta ska den högra och vänstra marginalen sättas till värdet auto.

I exemplet nedan kommer det inre blocket att centreras:

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

Tänk på att du på detta sätt bara kan centrera blockelement, bara horisontellt och bara om de har en bredd angiven.

Om vi behöver olika topp- och bottenmarginal margin, kan vi skriva så här:

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

Det kan också skrivas om med tre värden: det första sätter toppmarginalen, det tredje - bottenmarginalen, och det andra sätter värdet auto för den högra och vänstra marginalen:

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

Återskapa sidan enligt mönstret och gör så att de gröna blocken placeras i mitten av deras förälder: