Могу ли я центрировать вертикальную высоту DIV вертикально в окне просмотра с помощью CSS?

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

Это должно быть решение для 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; 
}

И даже в ОК мире мы должны быть в состоянии решить эту проблему с помощью нескольких стилей. Но, чтобы процитировать персонажа Ving Rhames из Pulp Fiction, мы довольно% & #! Ing далеко от OK.

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

источник

2010-03-03 Robusto

Когда вы говорите, «независимо от того, как изменилось окно браузера», вы имеете в виду, что div должен динамически перестраиваться если размер окна изменяется после загрузки страницы? –

@RegDwight: Да, это именно то, что я имею в виду. – Robusto

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

источник

2010-03-03 13:58:39 Tom

Том, это отлично работает, спасибо. Я на самом деле пробовал версию этого до этого без успеха, но когда я увидел ваш ответ, я вернулся и снова посмотрел на этот код и обнаружил некоторый рывок, в том числе ошибочное правило «margin: auto 0», которое разрушило все это. Как только я удалил это, он сработал. Большое спасибо! – Robusto

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

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

#mainDiv 
    { 

    border: 1px dashed #000000; 
    } 

    #centerDiv 
    { 
     margin: 33% auto; 
     height: 200px;   
    }

источник

2010-03-03 13:59:32

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

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

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

}

источник

2014-10-08 06:46:25

Это хороший подход, пожалуйста, не забудьте добавить 'position: absolute;' иначе это не сработает. –

он работал для фиксированной позиции – maan81

Могу ли я центрировать вертикальную высоту DIV вертикально в окне просмотра с помощью CSS?

ответ

Смежные вопросы