Вертикальное и горизонтальное выравнивание по центру на HTML и CSS
Допустим есть информационный блок на сайте или форма для входа. И возникает задача поместить этот блок точно в центре вне зависимости от разрешения экрана. Существует множество способов горизонтального и вертикального выравнивания. Рассмотрим наиболее простой из них.
Выровнять объект по горизонтали несложно для этого достаточно использовать спецификацию CSS margin. Вспомогательной здесь является спецификация display. Все, что потребуется создать это контейнер div с соответствующими параметрами:
<div style="display:table;margin:0 auto;">Выравниванием содержимое по центру</div>
Параметр спецификации display table указывает на то, что объект якобы является блочной таблицей.
Итак, горизонтальное выравнивание по центру оказалось несложным. Далее предстоит сделать то же самое, но еще и по вертикали.
Для этого нужно будет добавить еще один контейнер <div>. Также нужно использовать спецификацию display, но уже с параметром table-cell, якобы указывая на ячейку таблицы. В таблице же параметром, отвечающим за положение по вертикали является vertical-align. Итак, используя все спецификации получаем следующий код:
<div style="display:table;height:100%;margin:0 auto;"><div style="display:table-cell;vertical-align:middle;">Выравниванием содержимое по центру</div></div>
Обращаем ваше внимание на то, что в первом контейнере div для стилей добавлена еще спецификация height равная 100%. Тем самым мы указываем на то, что необходимо использовать именно высоту всей страницы.
Еще нужно обратить внимание на спецификацию vertical-align:middle. Дело в том, что если написать в заголовке html 5 документа по стандарту <!DOCTYPE HTML> вышеуказанный код перестает работать. Проблема решается указанием высоты для тэгов html и body. Причем для второго нужно указать не 100%, а несколько меньше, так как появляется вертикальная полоса прокрутки.
Итак, с учетом всех изменений код по горизонтальному и вертикальному выравниванию будет выглядеть следующим образом:
<!DOCTYPE HTML>
<html>
<head>
<style>
html { height: 100%; }
body { height: 95%; }
</style>
</head>
<body>
<div style="display:table;height:100%;margin:0 auto;">
<div style="display:table-cell;vertical-align:middle;">Выравниванием содержимое по центру
</div></div>
</body>
</html>
Существуют и другие способы выравнивания по горизонтали и по вертикали, но данный является одним из наиболее простых.
При выравнивании объекта по центру часто нужно использовать внешние или внутренние отступы в html на css для его смещения.