CSS центрирование DIV блоков: горизонтальное и вертикальное

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

Для начала, основы:

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

Это делается просто, мы используем margin для нашего div блока.

.className{

                margin:0 auto;

                width:200px;

                height:200px;

}

Для центрирования div блока только горизонтально, вам необходимо определить ширину блока (width), использовать свойство auto для отступов (margin) слева и справа. Этот метод будет работать для всех блочных элементов (div, p, h1, и так далее…). Для применения горизонтального центрирования для строковых элементов (ссылки, картинки…), вам необходимо применить параметр display:block;

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

Центрирование div блока по горизонтали и вертикали одновременно, немного замысловатее. Вам необходимо знать размеры div блока преждевременно.

.className{

                width:300px;

                height:200px;

                position:absolute;

                left:50%;

                top:50%;

                margin:-100px 0 0 -150px;

}

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

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

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

$(window).resize(function(){

 

                $('.className').css({

                               position:'absolute',

                               left: ($(window).width() - $('.className').outerWidth())/2,

                               top: ($(window).height() - $('.className').outerHeight())/2

                });

 

});

// Для запуска функции при загрузке окна:

$(window).resize();

Функционирование данного метода заключается в запуске функции resize(), с помощью строки $(window).resize(). Эта функция работает всегда, когда изменяется размер окна браузера. Мы используем outerWidth() и outerHeight(), потому что в противовес width() и height(), они включают отступы и толщину рамок в размер, который возвращается ими. Последняя строка, запускает процесс центрирования div блока при загрузке страницы.

Преимущество использования этого метода в том, что вы можете не знать, какой размер div блока. Главный недостаток – это работоспособность только при включенном JavaScript. Поэтому этот метод приемлем для многофункциональных интерфейсов, таких как Вконтакте, Facebook и т.д.

Как всегда, вы можете предложить свой любимый метод центрирования блоков, написав в комментарии.  

Дальше: YouTube API: плеер с помощью YouTube API, jQuery, CSS