HTML и CSS Вертикальное выравнивание тела на всех размерах экрана

Question

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

Я пробовал кое-что с вертикальным выравниванием, но, похоже, не работает или правильно.

Я сделал маленькую ручку кода, отображающую идею.

codepen.io/anon/pen/vGXrbB 

Кто-нибудь знает, какую технику я могу использовать для достижения своей цели? Спасибо заранее!

Answer 1

Для центрирования DIV по вертикали Вы должны создать «поплавка» DIV, какой и вы должны знать высоту DIV, который должен быть по центру вертикально, проверьте этот образец:

html, body { 
 
    margin:0; 
 
    padding:0; 
 
    height:100%; 
 
} 
 

 
#floater { 
 
    position:relative; 
 
    float:left; 
 
    height:50%; \t 
 
    width:100px; 
 
\t background-color:blue; 
 
    margin-bottom: -100px; 
 
} 
 

 
#centered { 
 
    position:relative; 
 
    clear:left; 
 
    height:200px; 
 
    width:100%; 
 
    margin:0 auto; 
 
    background:green; 
 
} 
 

 
#middle { 
 
\t text-align: center; 
 
    height: 100%; 
 
    width: 900px; 
 
    background-color: red; 
 
    position: relative; 
 
    margin: 0 auto;     
 
}

<div id="floater"> 
 
</div> 
 
<div id="centered"> 
 
\t <div id="middle"> 
 
\t \t text 
 
\t </div> 
 
</div>