14 января 2019

Очень часто приходится отцентрировать div с position: absolute относительно окна браузера и когда известны размеры экрана и размеры блока, который нужно разместить по центру, сделать это довольно просто. Но что делать, когда размеры могут быть произвольными?

С появлением CSS3 сделать это достаточно просто.

Допустим, есть блок <div class="centerbox">text</div>, который будем центрировать. Для этого ему необходимо задать следующие css-свойства:

.centerbox {
position: absolute;
background-color: #ccc; /* цвет фона */
width: 400px; /* ширина может быть любой */
max-width: 96%; /* задаем максимальную ширину для корректного отображения на маленьких экранах */
top: 50%; /* позиционируем блока на 50% высоты от верха */
left: 50%; /* позиционируем блока на 50% ширины от левого края */
transform: translate(-50%, -50%); /* смещаем на 50% ширины и высоты блока вверх и влево */
}

 

Хотелось бы обратить внимание на свойство transform: translate(-50%, -50%);
Если раньше мы могли смещать <div> только при помощи отрицательных margin-ов на половину от ширины и высоты <div>, но при этом необходимо было знать его высоту и ширину, либо вычислять при помощи JS, то свойство полезнейшее свойство transform: translate(-50%, -50%); смещает автоматически на половину ширины и высоты.

Таким образом наш блок всегда будет по центру экрана на любых устройствах и при любых размерах без использования JS

 
Добавить комментарий





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2020 'Tochcha' Все права защищены