HTML＆amp; CSS垂直对齐所有屏幕尺寸的身体部位

Question

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

我尝试了一些垂直对齐的东西，但似乎没有工作或正确的方式。

我制作了一个显示这个想法的小代码笔。

codepen.io/anon/pen/vGXrbB

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

Answer 1

要垂直居中div，你需要创建＆＃34;浮动＆＃34; div你需要知道需要垂直居中的div的高度，请查看此示例：

＆＃13;

＆＃13;

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;                
} 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;