Выравнивание CSS блока по центру - одна из наиболее частых задач в верстке. Способов решения этой задачи существует множество и именно их мы сейчас рассмотрим.
Выравнивание с помощью отрицательных отступов
Способ подходит для наиболее простого случая, когда известны размеры выравниваемого блока. Мы позиционируем его с помощью CSS свойств top и left на 50% и задаем отрицательный margin, который равен половине размера блока.
Недостатками данного метода являются необходимость знать размеры блока и то, что блок не корректно ведет себя в окружении скроллбаров - он обрезается из-за отрицательных отступов. Пример.
Автоматический отступ
Еще один способ, когда известны размеры выравниваемого по центру блока. Блок позиционриуется с помощью CSS свойствами top, left, right, bottom равными нулю и margin:auto
. Здесь у родительского блока уже рабочие скроллбары, при условии, что у него задана 100% ширина и высота: пример.
Табличное выравнивание
Задаем родительскому блоку табличные стили и устанавливаем выравнивание текста по центру и вертикали, а выравниваемый блоку делаем строчным блоком: пример.
Плюс данного метода в том, что нам не нужно знать размеры выравниваемого с помощью CSS блока. Минус - не рабочие скроллбары. Если вам нужен скролл - добавьте в конструкцию еще один элемент: пример.
Выравнивание блока в CSS с помощью псевдо-элемента
В этом методе нас уже не интересуют размеры блока, но для центрирования по вертикали потребуется родительский блок. Задаем псевдо-элементу :before для родительского блока 100% высоту, выравнивание по центру и модель строчного блока. Блок, который мы выравниваем, также делаем строчным блоком и выравниванием по центру. Чтобы блок не сваливался под псевдо-элемент, когда размеры блока-потомка больше чем родителя, прописываем родителю CSS-стили white-space: nowrap
и font-size: 0
(чтобы убрать пробел между родителем и блоком, возникающий при форматированием кода), а у самого блока отменяем эти стили: white-space: normal
.
Примеры с нулевым и без нулевого font-size: 1, 2.
Если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы, то сделайте как в примере.
Выравнивание блока с помощью Flexbox
Самый простой и универсальный метод, единственный его недостаток - поддержка IE 10+. Пример.
Центрируем с помощью translate
Интересное решение с помощью CSS3 трансформаций. Обеспечивает как горизонтальное центрирование, так и вертикальное:
.centerdiv {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
Недостатки данного метода: работает в IE 9+, если внутри контейнера есть текст и мы имитируем попап, то текст может быть немного размыт: пример.
Экзотический способ
Можно задавать внешние отступы для блока, при этом последний будет правильно отображаться среди скроллбаров: Пример.
Этим же способом можно выравнивать картинку по центру, а если она больше родительского блока - масштабировать ее по размеру родителя: пример, пример c большой картинкой.