Могу ли я центрировать DIV фиксированной высоты по вертикали в окне просмотра с помощью CSS? - PullRequest
6 голосов
/ 03 марта 2010

У нас есть страница входа в систему, которая рассчитана на DIV с высотой 200 пикселей по вертикали в центре страницы. Таким образом, он создает синюю полосу шириной 200 пикселей от левого края до правого края (с элементами формы в нем), которая в идеале должна оставаться вертикально в центре области просмотра независимо от того, как изменяется размер окна браузера.

Это должно быть решение CSS.

Итак, скажем, вот несколько примеров разметки:

<body>
    <div id="mainDiv">
       <div id="centerDiv" style="height:200px;background-color:blue;color:white">
           Center this baby vertically in the #mainDiv, please!
        </div>
    </div>
</body>

Предположим, что мой CSS требует, чтобы #mainDiv растягивался, чтобы покрыть верхнюю и нижнюю часть области просмотра, что достаточно легко сделать. Существуют ли правила CSS, которые я могу применить к любому из элементов или к странице, которая будет надежно и кросс-браузерной (в том числе IE6) вертикально центрировать #centerDiv? В идеальном мире мы должны просто сказать

#centerDiv {
  margin: auto 0;
}

И даже в нормальном мире мы сможем решить эту проблему несколькими стилями. Но если процитировать персонажа Вин Рэймса из «Криминального чтива», мы довольно далеки от ОК.

Я посмотрел на решения, предложенные в связанных вопросах, и просмотрел сеть. Ничего, что я могу найти, не работает на 100%. Может быть, это неразрешимо, но я подумал, что у меня возникнет проблема с коллективным мозгом и посмотрим, смогу ли я стать счастливчиком. Заранее спасибо.

Ответы [ 3 ]

12 голосов
/ 03 марта 2010

Если у вас фиксированная высота, вы можете это сделать. Дайте ребенку div верх 50% и маржу -100px (или наоборот), и вы должны быть установлены.

2 голосов
/ 08 октября 2014

если высота неизвестна:

http://jsfiddle.net/Limitlessisa/a7xw6b2c/

.centerdiv{
   background:red;
   position:absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

}

1 голос
/ 03 марта 2010

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

Самое близкое, я думаю, вы можете сделать это с помощью простого решения CSS это:

    #mainDiv
    {

     border: 1px dashed #000000;   
    }

    #centerDiv
    {
        margin: 33% auto;
        height: 200px;          
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...