Выравнивание блочных элементов на 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;
}