Есть сайт, которым я сейчас занимаюсь.
Там на данный момент шапка и 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; }
И получается
вот так, попробуйте изменять ширину окна с результатом, увидите то, что я описывал.
Средний
