Центрирование DIV по горизонтали и вертикали с помощью CSS

В этой статье мы рассмотрим один из способов центрирования DIV по горизонтали и вертикали с помощью CSS. Для этого метода нам необходимо обязательно знать размеры центрируемого DIV.

.divclass{
   position: absolute;
   width: 400px;
   height: 300px;
   top: 50%;
   left: 50%;
   margin: -150px 0 0 -200px;
}

При абсолютном позиционировании элемента, мы можем отделить его от окружающих элементов и определить позицию по отношению к окну браузера. Для размещения верхнего левого угла ровно по центру устанавливаем позиционирование DIV на 50% от левой и верхней части окна.

Завершающим этапом сдвигаем блок вверх и влево на половину высоты и ширины блока, используя отрицательные значения margin.