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

При создании макета веб-страницы, вы, вероятно, сталкивались с ситуацией, когда вам нужно отцентрировать div по горизонтали и вертикали, используя CSS. Есть несколько способов с применением CSS и JQuery.

Но вначале основы:

Выравнивание по горизонтали средствами CSS

.class-name{
margin:0 auto;
width:200px;
height:200px;
}

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

Выравнивание по горизонтали и вертикали средствами CSS

Одновременное центрирование div по по горизонтали и вертикали чуть более хитрое. Вам нужно заранее знать размеры div.

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


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

Выравнивание по горизонтали и вертикали с помощью jQuery

Как уже говорилось, вышеуказанный метод CSS работает только с div-ом фиксированного размера. На помощь приходит JQuery:

// объявление функции:
$(window).resize(function(){
$('.class-name').css({
position:'absolute',
left: ($(window).width() - $('.class-name').outerWidth())/2,
top: ($(window).height() - $('.class-name').outerHeight())/2
});
});
// вызов функции:
$(window).resize();

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

Преимуществом использования этого метода является то, что вам заранее не нужно знать размер div-а. Основным недостатком является то, что этот метод будет работать только с включенным JavaScript.

Не забудьте поделиться вашими любимыми методами в комментариях.

Попытка что-то отцентировать в CSS

Trying to center something in CSS pic.twitter.com/BQfw8wq6gX

— Thomas Fuchs (@thomasfuchs) 29 августа 2015