Как разместить форму в центре страницы горизонтально и вертикально?

Question

[zanooda]

Я нашёл довольно много решений в сети но я хочу чего-то особенного... Во-первых я хочу что бы элемент внутри которого находится форма занимал 100% по ширине и 100% по высоте, во-вторых я хочу что бы ширина формы изменялась в зависимости от ширины окна (она должна занимать 50% от ширины страницы но быть не меньше чем ширина окна в телефоне) и в-третьих я хочу что бы эта форма всегда была по середине страницы (горизонтально и вертикально).

Все решения которые я нашёл в сети предпологают что высота элемента внутри которого находится форма заданы в пикселях а я хочу что бы элемент всегда занимал 100% страницы, будь-то телефон, планшет или огроменный экран. Соответственно если это огромный экран то форма тоже должна быть большой (например 50% от ширины экрана) но если это телефон то форма должна быть по ширине экрана (но вертикально всё равно быть по серидине).

А вот футер всегда должен быть внизу, под элементом внутри которого находится форма.

Я уверен что должно быть уже готовое решение в сети но я не нахожу. На страничке не должно быть ничего кроме формы поиска и футера НО возможно в будущем добавится меню вверху (Bootstrapное).

Answer 1

[shevchenko_ch]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[zanooda]

не понятно как это решение адаптировать для того что бы форма тоже изменяла свой размер в зависимости от ширины окна

[Юрий Кучеренко]

zanooda: Ходят легенды что есть такая штука как медиа запросы, пока еще никто не юзал, так что тоже мучаемся

[shevchenko_ch]

это для позиционирования формы, размер формы можно задать в css с помощью тега media (например, media: 480px { min-width: 100%} и т.д)

Answer 2

[Danil Sapegin]

Делаете три вложенных дива с такими свойствами display - table, table-row, table-cell (от родительского к дочернему). У последнего, который table-cell делаете text-align: center и vertical-align: middle.