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

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

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

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

:

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

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

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

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

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

Повторите страницу по образцу, сделав так, чтобы зеленые блоки располагались по центру своего родителя:

## Выравнивание

Значение `auto` для `margin` на самом деле может не только центрировать. Фактически это значение позволяет рассчитать отступ автоматически и сделать его максимально возможным. Когда мы ставим `auto` для левого и правого отступа - элемент центрируется.

Можно, однако, поставить только левый отступ. В этом случае элемент получит максимально возможный отступ слева и займет крайнее правое положение:

`<div class="parent"> <div class="child"></div> </div>` `.parent { padding: 10px 0; border: 1px solid red; } .child { margin-left: auto; /* задаем автоматический левый отступ */ height: 100px; width: 200px; border: 1px solid green; }`

:

## Нюанс

При необходимости можно задать и правый отступ и элемент не будет прижат вплотную к правой границе, а отступит от нее:

`<div class="parent"> <div class="child"></div> </div>` `.parent { padding: 10px 0; border: 1px solid red; } .child { margin-left: auto; margin-right: 20px; /* задаем правый отступ */ height: 100px; width: 200px; border: 1px solid green; }`

:

←→
↑