Центрирование DIV по горизонтали и вертикали с помощью CSS
В этой статье мы рассмотрим один из способов центрирования DIV по горизонтали и вертикали с помощью CSS. Для этого метода нам необходимо обязательно знать размеры центрируемого DIV.
.divclass{
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
}
При абсолютном позиционировании элемента, мы можем отделить его от окружающих элементов и определить позицию по отношению к окну браузера. Для размещения верхнего левого угла ровно по центру устанавливаем позиционирование DIV на 50% от левой и верхней части окна.
Завершающим этапом сдвигаем блок вверх и влево на половину высоты и ширины блока, используя отрицательные значения margin.