css - 在一列设计中垂直居中 div

Question

经过长时间的中断后，我回到了 html/css，需要一些帮助。

背景：当用户与固定导航栏交互时，我使用 1 列布局和 jQuery 将页面自动滚动到各种 div。

问题：当您在垂直分辨率比我的笔记本电脑或移动设备更大的屏幕上查看页面时，您可以一次看到所有或部分不同的 div 部分。

问题：有没有办法垂直分隔 div，以便滚动功能类似于我使用链接到不同文件的传统导航栏？换句话说，我不想一次看到所有的 div，只看到用户点击的那个。

多谢！

Answer 1

<div id="content">
    <div class="container">
        <div class="pseudopage">
            foo
        </div>
    </div>
</div>

使用该基本结构（重复“容器” div），您可以执行以下操作：

​#content{
    border: 1px solid black;
    height: DESIRED_HEIGHT;
    width: DESIRED_WIDTH;
    overflow:hidden;
}

.container {          
    height:100%;
    width:100%;
    text-align:center;
}

.pseudopage {
    vertical-align:middle;  
    display:inline-block;
    margin:px;
}
div.container:before{
    content: '';        
    height:100%;
    width: 0px;
    margin:0px;
    vertical-align:middle;
    display:inline-block;
}

享受！此外，#content div 很可能是页面的主体，但您必须记住设置高度。（专业提示 - 如果您将 的高度设置html为 100% 和body100%，那么您将填满屏幕。）