it-swarm.com.ru

Создайте центр видимости 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 будет уменьшать в верхнем центре, но то, что я хочу, должно всегда присутствовать в центре экрана как вертикально, так и горизонтально.

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

Заранее спасибо.

25
user1257587
#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 */
}

демо: https://jsfiddle.net/00utf52o/

41
stecb

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

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

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

Я только что заменил margin-left и margin-top с помощью transform.

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

#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 | Источник

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

14
musafar006

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

<div id="container">
  <div id="wrapper">Always center, No matter the parent div's 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

13
rkrara

Я использую 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();
4
Hupperware

Самый простой и чистый способ сделать это - установить высоту, поле (и ширину, если хотите) с использованием размеров области просмотра. 
Допустим, вы хотите, чтобы height вашего контейнера занимал 60% (60vh) экрана, а остальные (40vh, так как общая высота области просмотра = 100vh) можно разделить поровну между верхним и нижним полями, чтобы элемент выравнивается по центру автоматически.
Если для margin-left и margin-right установлено значение auto, контейнер будет отцентрирован по горизонтали. 

.container {
         width: 60vw; /*optional*/
         height: 60vh;
         margin: 20vh auto;
         background: #333;
 }
<div class="container">
</div>

0
Rocks

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

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

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

0
chicagoing