CSS - Выравнивание по центру

В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.
В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.
Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

CSS - Выравнивание блока по центру
1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
HTML-код:
<div class="parent"> ... <div class="child"> ... </div> </div>
CSS-код:
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
Браузеры, которые поддерживают данное решение:
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.
.parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Выравнивание по горизонтали
1. Выравнивание одного блочного элемента (display: block
) относительно другого (в котором он расположен) по горизонтали:
HTML-код:
<div> ... <div class="block"> ... </div> </div>
CSS-код:
.block { margin-left: auto; margin-right: auto; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Выравнивание строчного (display: inline
) или строчно-блочного (display: inline-block
) элемента по горизонтали:
HTML-код:
<div class="parent"> ... <div class="child"> ... </div> </div>
CSS-код:
.parent { text-align: center; } .child { display: inline-block; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Выравнивание по вертикали
1. Отцентровать один элемент (display: inline
, display: inline-block
) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height
.
HTML-код:
<div class="parent"> ... <div class="child"> ... </div> </div>
CSS-код:
.parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.
.parent { display: table; } .child { display: table-cell; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.
Ну дизайнер так надизайнил, а че — красиво ведь…
Вобщем все известные трюки не сработали, и в результате родил новый.
На флексах.
Смотреть тут: https://jsfiddle.net/bigvax/h69ydgv3/
А вдруг, кому-либо пригодится…
А может, кто-нибудь более грамотный что-либо оптимизирует… ;)
Спасибо.
Дело в том, что по умолчанию ширина у элементов 100%, width лишь делает визуальную ширину и в одну строку стать второму элементу невозможно. Решить эту проблему помогает display: inline-block и box-sizing: border-box (Позволяет не учитывать другие свойства по ширине) Они, если можно так сказать придают width и height реальность. Правильно ли я понимаю это?
В этом случае ширина и высота блока будут определяться так:
Такой расчёт не всегда удобен, поэтому чтобы его изменить в CSS добавляют такое правило:
После этого высота и ширина всех элементов на странице будут определяться согласно установленным значениям.
Здравствуйте!
Как в header и footer добавить много записей: слева, справа, по середине, сверху и снизу?
Прошел два курса по html и css, сверстал пару проектов, но почему то никто подробно не затрагивает тему header и footer…
Вложенный блок становится не важен — выровняется все на свете.
P.S. в блоке «CSS — Выравнивание по вертикали»: «Родительский блок в этом примере имеет фиксированную ширину». Нужно высоту.