Буквально на днях необходимо было написать небольшой шаблон для сайта. Но только задача ставилась, что шаблон должен был быть написан исключительно только DIV-ами, имел фиксированную ширину и высоту, и должен располагаться по центру экрана. Немного поразмыслив, накидал небольшой код в HTML+CSS который решил данную задачу. Если кому то понадобитсмя такое же решение, пожалуйста пользуйтесь. Оно может подойти как и для странички сайта, так например и для формы авторизации.
Ну в общем то а теперь и само рещение.
В начале напишем сам код в HTML:
Известно, что выровнить блок заданной ширины по центру по горизонтали можно с помощью свойства margin:0 auto. Но как поступить, если его еще надо выровнить по центру по вертикали.
На самом деле всё просто. Чтобы разместить по центру блок с заданной шириной и высотой, надо его абсолютно спозиционировать с left:50% и top:50% относительно экрана и отрицательным маргином сместить его назад на половину размера ширины и высоты дива.
Как видите, сначала мы задали html и body 100% высоту, чтобы они растянулись на весь экран, потом спозиционировали слой с left и top по 50% и отрицательным маргином сместили его назад на половинчатые размеры.
Подскажите пожалуйста как выровнять блок div по центру экрана, по горизонтали и вертикали?
Я хочу разместить блок точно по центру, а блок сдвигается вправо и вниз, уходит больше, чем нужно.
Если это модальное окно, то лучший код для решения этой задачи будет этот:
Самая простая разметка, выравнивание блока по вертикали и горизонтали это использование свойств table и table-cell
Третий класс inner можно не писать, а в middle определить его расположение
Если использовать блок с однострочным текстом или картинкой, то текст внутри блока можно выровнять при помощи такой записи:
Обязательным свойством стиля является justify-content: center. Свойство align-items определяет вертикальное выравнивание содержимого блока, а justify-content в свою очередь определяет горизонтальное выравнивание. В данном примере все работает в связке стиля flex. Дочерний элемент span, автоматически становится с минимальной шириной.