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:

html<div class="parent">
  <div class="child"></div>
</div>

css.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:

css.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:

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