Центрирование 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.

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

Перевод с tutorialzine.com

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


Понравилась статья? Поделиться с друзьями:
Комментарии: 12
  1. Игорь

    Благодарю за статью, очень удобно

  2. Игорь

    А по какому принципу работает auto? Если у нас выравнивается куча дивов? То как он сработает? Внутренние отступы какими будут?

    1. FORTRESS-DESIGN (автор)

      Свойство auto размещает объект по центру контейнера, в котором он находится.

  3. Александр

    Зачем нужно $(window).resize(); после первого запуска ? Не понятно

    1. FORTRESS-DESIGN (автор)

      Какого первого запуска? Приведен пример объявления функции и вызова её. И ни строчки больше. Вы о чем?

  4. Александр

    $(window).resize(function(){
    $('.class-name').css({
    position:'absolute',
    left: ($(window).width() - $('.class-name').outerWidth())/2,
    top: ($(window).height() - $('.class-name').outerHeight())/2
    });

    этого достаточно, у меня работает, зачем нужно ещё и это:
    $(window).resize();

    1. FORTRESS-DESIGN (автор)

      Строка $(window).resize(); — это вызов функции. То есть написав всего одну строку, можно несколько раз вызывать одну и ту же функцию в нескольких местах кода, где это необходимо.

  5. Штиф Васлер

    А как не при ресайзе, а изначально сделать блок по центру?? зачем при ресайзе то конкретно, надо что бы сразу стоял по центру, как это сделать??

  6. Максим

    Метод через jquery описанный в данной статье работает только когда изменяется размер экрана. При стартовой загрузке страницы метод не рабочий, увы. поэтому размеры нужно указывать в любом случае

  7. fortress-design

    А разве при загрузке страницы он не определяет размер она?

  8. Максим

    Метод .resize работает когда идет срабатывание события изменение окна браузера, от того он и не рабочий когда идет просто стартовая загрузка страниц. Сами попробуйте заюзать, если до того как написать статью вы этого не делали

  9. fortress-design

    А каким методом вы определяете размер окна?

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: