выравнивание по вертикали — это поведение, характерное для таблиц.
Таким поведением элементов любят пользоваться сторонники табличной вёрстки.
Вот и мы этим воспользуемся.
нужно включить фантазию, и представить, что у нас есть таблица высотой 100% от высоты окна, в ней ячейка высотой 100% от высоты таблицы, для которой включено выравнивание по центру, а уже в этой ячейке по центру размещается вложенная таблица, в которой располагается всё остальное.
Красиво?
Воплотить фантазии в жизнь можно так:
html {
display: table; /* та самая воображаемая таблица */
width: 100%; height: 100%; /* во весь размер окна */
}
body {
display: table-cell; /* типа ячейка */
width: 100%; height: 100%; /* во весь размер таблицы */
vertical-align: middle; /* содержимое которой выравнивается по вертикали */
text-align: center; /* и по горизонтали */
}
form {
display: table; /* якобы вложенная таблица. Тогда будет центроваться как надо */
width: auto; /* это уже на ваше усмотрение, вообще не обязательно, но мало ли что дизайнер задумал. То же и с высотой: хотите — задавайте, не хотите — не надо. Всё равно форма будет по центру. */
}
и всё, внутри формы можете теперь вытворять что заблагорассудится.
Только этот способ не работает в древних версиях IE
Так что включаем graceful degradation, и делаем, чтобы там выглядело хоть как-то:
<!--[if lte IE 7]>
<style type="text/css">
form {
width: 400px; /* выберите наиболее подходящий. Если явно не указать ширину, то форма расположится на всю ширину документа */
margin-top: 100px; /* опять же выберите наиболее подходящий отступ сверху. Это будет не центровка по вертикали, но чтобы выглядело относительно пристойно.
}
</style>
<![endif]-->
Если кто знает способы исправить метод, сделать его пригодным для старых версий IE, дополните пожалуйста ответ.
