Центрирование DIV по горизонтали и вертикали

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

Горизонтальное центрирование на CSS

По классике жанра, используем свойство margin:

Для того, чтобы отцентрировать DIV только по горизонтали, необходимо указать ширину (свойство width) этого блока и значения auto для левого и правого margin.

Этот метод работает на блочных элементах (div, параграфы, h1, и т.д.). Чтобы применить этот метод к линейным элементам (например, гиперссылки и изображения), необходимо установить дополнительное правило — display:block.

Горизонтальное и вертикальное центрирование на CSS

Центрирование DIV по горизонтали и вертикали на CSS выглядит немного сложнее. Одно условие — вам надо знать заранее размеры DIV.

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

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

Горизонтальное и вертикальное центрирование на jQuery

Как упоминалось ранее — метод центрирования на CSS работает только для блоков с фиксированными размерами. Здесь, в игру вступает jQuery:

Функциональность вставлена в $(window).resize(), которая выполняется каждый раз при изменении размеров окна. Мы используем outerWidth() и outerHeight(), потому что в отличие от типичных width() и height(), они добавляют значение padding и ширину бордюра (border) к возвращаемому размеру. И в конце, вызываем событие изменение размеров окна, чтобы установить DIV точно по центру на странице загрузки.

Оценка и возможное применение

Преимущество использования этого метода заключается в том, что вам не нужно знать размеров DIV. Основной недостаток в том, что данный метод не будет работать, при отключенном JavaScript. Однако, этот метод будет просто идеальным для различных пользовательских интерфейсов (таких, как Facebook).