Wyrównywanie elementów blokowych w CSS

Właściwość margin jest używana nie tylko do ustawiania marginesów, ale także do wyśrodkowywania elementów blokowych. Aby to zrobić, prawy i lewy margines należy ustawić na wartość auto.

W poniższym przykładzie wewnętrzny blok zostanie wyśrodkowany:

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

Miej na uwadze, że w ten sposób można wyśrodkować tylko elementy blokowe, tylko w poziomie i tylko, jeśli mają zadaną szerokość.

Jeśli potrzebujemy różnych górnego i dolnego marginesu margin, to można napisać tak:

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

Można to również zapisać za pomocą trzech wartości: pierwsza ustawi górny margines, trzecia - dolny, a druga ustawi wartość auto dla prawego i lewego marginesu:

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

Powtórz stronę według wzoru, tak aby zielone bloki były umieszczone na środku swojego rodzica: