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:

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

Результат:

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:

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

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