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