Создайте div-центр просмотра - горизонтально и вертикально

У меня есть контейнер <div id="wrapper">, в котором будет присутствовать весь контент сайта. Я попытался сделать div-центр вертикально и горизонтально, используя свойство css, например margin:0 auto; on #wrapper.

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
}

Используя выше css, я могу сделать div в (верхний центр) экрана, но как сделать его центром (по вертикали). когда я уменьшаю масштаб в firefox, мой div будет уменьшаться в верхнем центре, но то, что я хочу, должно всегда присутствовать в центре экрана как по вертикали, так и по горизонтали.

Может ли кто-нибудь предложить мне, как я могу получить такой макет.

Спасибо заранее.

Ответ 1

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-250px;
 margin-top:-250px;
}

Демо: http://jsfiddle.net/fJtNQ/

Почему это работает?

Ну, в основном у вас есть элемент с абсолютным позиционированием внутри dom. Это означает, что вы можете позиционировать его везде, где хотите, и если у вас нет относительного позиционированного элемента как родителя, слева и сверху будет расстояние от начала документа слева/сверху.

Назначение left:50% и top:50% позволяет этому элементу располагаться всегда в центре экрана, но в центре вы найдете верхний левый угол элемента.

Если у вас есть фиксированная ширина/высота, вы можете легко "перевести" точку в центре на самом деле в центр обертки div, указав отрицательные margin-left и margin-top (поэтому с помощью некоторых чрезвычайно простых базовой математике их значения будут -(width/2) и -(height/2))

ИЗМЕНИТЬ

Вы также можете легко центрировать, используя flexbox, плюс (большой), вам не нужно указывать w/h, т.е.:

body { /* can also be whatever container */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#wrapper {
  /* whatever style u want */
}

demo: https://jsfiddle.net/00utf52o/

Ответ 2

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

<div id="container">
  <div id="wrapper">Always center, No matter the parent div position</div>
</div>

#wrapper {
 width:300px;
 height:300px;
 margin:0 auto;
 background:green;
 position:fixed;
 left:50%;
 top:50%;
 margin-left:-150px;
 margin-top:-150px;
}

#container {
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  bottom: 0;
  left: 0;
}

демо здесь http://jsbin.com/yeboleli/2/edit?css,output

Ответ 3

@stecb ответ работает отлично, если вы работаете с фиксированной шириной/высотой.

Чтобы позиционировать div или изображение по вертикали в центре во всех видовых экранах и сделать его отзывчивым, используйте это:

#elem-to-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Я просто заменил margin-left и margin-top на преобразование.

Если вы хотите получить маржу, окружающую элемент, используйте это:

#outer-elem {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #fafafa;
    position: relative;
}
#elem-to-center {
    width: calc(100% - 60px);
    max-height: calc(100% - 60px);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JSFiddle | Источник

Я нашел это полезным даже в отзывчивых представлениях.

Ответ 4

Я использую jQuery

$(window).resize(function(){

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

});

// To initially run the function:
$(window).resize();

Ответ 5

Рассмотрим с помощью display: table в сочетании с display: table-cell; vertical-align: middle на отдельный элемент. Поскольку CSS не имеет семантического значения, это приемлемое решение.

Я подготовил для вас пример: http://dabblet.com/gist/2002681

Единственным недостатком является то, что требуется немного больше разметки, чем некоторые другие решения, но он сжимается и расширяется с контентом.