HTML & CSS 在所有屏幕尺寸上垂直对齐正文网站

Question

我正在构建一个网站，我的目标是在所有屏幕尺寸上显示我网站的某个部分。所以在我的身体里，我有一个带有徽标的第一个容器和一些介绍文本，然后是第二个容器。我想要第一个容器，假设显示第二个容器的 100px。该网站有一个全屏背景图像，内容在其上滑动（小视差效果）

我已经尝试了一些垂直对齐的东西，但似乎不起作用或方法不正确。

我做了一个小代码笔来显示这个想法。

codepen.io/anon/pen/vGXrbB

任何人都知道我可以使用什么技术来实现我的目标？提前感谢！

Answer 1

要垂直居中div，您需要创建 "floater"div，并且您需要知道需要垂直居中的div 的高度，请检查此示例：

html, body {
    margin:0; 
    padding:0;
    height:100%;
}
#floater {
    position:relative; 
    float:left;
    height:50%;	
    width:100px;
	background-color:blue;
    margin-bottom: -100px;
}
#centered {
    position:relative; 
    clear:left;
    height:200px; 
    width:100%; 
    margin:0 auto;
    background:green;
}
#middle {
	text-align: center;
    height: 100%;
    width: 900px;
    background-color: red;
    position: relative;
    margin: 0 auto;                
} 

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