Как на CSS сделать вертикальное выравнивание блоков по центру?

Есть сайт, которым я сейчас занимаюсь.
Там на данный момент шапка и 4 секции. В каждой секции есть собственный div wrapper, со своим id.
Так вот задача состоит в том, чтобы этот wrapper (Который в каждой секции примерно занимает 960х500) выравнять вертикально центру.
Каждая секция равна 100vh, для тех не не знает, это размер, равен высоте вашего экрана, а точнее клиентской области. То есть вы открыли мой сайт и первый сектор будет идеально помещаться в ваш браузер, как только чуть-чуть сдвинетесь вниз, то начнётся второй.
Именно поэтому нельзя использовать абсолютное позиционирование.
Я пробовал делать padding-top: calc(50% - 200px) и даже создавал здесь вопрос по этой теме. Потратил примерно 2-3 часа и не смог сделать так, чтобы во всех размерах он был по середине. Если уменьшать ширину окна браузера, то блок ползёт вверх, если увеличивать, то наоборот, вниз. Естественно это не выравнивание, а сплошная беда.
Прошу не скидывать ссылка на публикации про вертикальное выравнивание, я их читал и пробовал делать как там. Если всё же настаиваете, то приводите не ссылку на статью, а ссылку на http://jsfiddle.net/ или http://codepen.io где у вас без абсолютного позиционирования получилось сделать вертикальное выравнивание.
На данный момент у wrapper-ов такие значения:
#waterwrapper {padding-top: 120px; 
width: 960px; 
margin: 0 auto; }

Я пробовал делать вот так:
#waterwrapper {
padding-top: calc(50% - 200px); 
height: 400px;
width: 960px; 
margin: 0 auto; }

И получается вот так, попробуйте изменять ширину окна с результатом, увидите то, что я описывал.
  • Вопрос задан
  • 10487 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 6
Prilepsky
@Prilepsky
Программист 1C
Попробовал Table-Cell метод на вашей верстке, вроде бы позиционирует правильно.
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Отвечу не по теме: Вы вроде бы приводили в какой-то теме в пример верстки раковину и бегущую воду. У меня она корректно работает только в хроме, на всякий случай сообщаю. В остальных местах она разваливается.
Ответ написан
popcorn2d
@popcorn2d
Гар-гар-гар
line-height: 50px; не? это к примеру твоему
Ответ написан
@N0rd
Верстальщик
Может быть, так?
Если не подойдет - напишите какие стили заданы родительскому элементу wrapper-ов.
Ответ написан
qant
@qant
programer
А мне вот интересно... Вдруг кто поможет, что бы не плодить тот же вопрос.

Неужели нет простого и понятного объяснения что бы раз и навсегда понять причину всех этих проблем центровки блоков? Может есть какая та страница в сети где все уже объяснили и там все есть хотя бы на инглише?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы