Выравнивание блочных элементов в CSS

Свойство margin применяется не только для задания отступов, но и для центрирования блочных элементов. Для этого правый и левый отступ следует задать в значение auto.

В примере ниже внутренний блок станет по центру:

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

Результат:

Имейте ввиду, что таким образом можно центрировать только блочные элементы, только по горизонтали и только, если им задана ширина.

Если нам нужны разные верхний и нижний отступ margin, то можно написать вот так:

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

Можно переписать и через три значения: первое задаст верхний отступ, третье - нижний, а второе задаст значение auto для правого и левого отступов:

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