Очень часто приходится отцентрировать 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
