Я могу центрировать фиксированную высоту DIV вертикально в области просмотра с CSS?
У нас есть страница входа в систему, которая разработана, чтобы иметь 200px-высокий DIV, вертикально центрируемый посреди страницы. Таким образом, это создает синий левый край полосы на 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;
}
И даже в мире OK мы должны смочь решить эту проблему с несколькими стилями. Но заключить символ Ving Rhames в кавычки из Криминального чтива, Мы - симпатичный % &#! луг, далекий от OK.
Я посмотрел на решения, предлагаемые в Связанных Вопросах, и обыскивал сеть. Ничто я могу найти действительно работы 100%. Возможно, это неразрешимо, но я думал, что буду давать коллективным мозгам здесь проблему и видеть, могу ли я стать удачливым.Заранее спасибо.
2 ответа
Если у вас есть фиксированная высота, вы можете это сделать. Дайте дочернему div верхний предел 50% и верхний край поля -100 пикселей (или наоборот), и вы должны быть настроены.
Для истинного автоматического позиционирования в центре внутреннему DIV необходимо знать границы содержащего DIV . Если ваш контейнер не имеет жестких границ, внутренний DIV не сможет автоматически вычислить свою позицию. У него просто нет системы отсчета.
Я думаю, что самое близкое, что вы можете сделать с помощью простого решения CSS, это:
#mainDiv
{
border: 1px dashed #000000;
}
#centerDiv
{
margin: 33% auto;
height: 200px;
}