Css HTML5引导单页-垂直居中<；第节>'；s

大家好，谢谢你们的意见

我看过很多模板，但还没有发现一种在单页布局上显示垂直居中的“部分”内容的干净方法。我指的是整个区域空间，而不是其中的元素

理想的效果是一次将可查看内容限制为多个部分，并使用滚动键移动到单个页面上的下一个部分。。。使用easing.js非常简单

因此，对于psuedo标记，将有如下内容

<section id="topic1"
    <random element>
    <random element>
</section>

... Some space added to ensure no overlap of sections are viewed here ...
... e.g. margin-top: 100px or 10%

<section id="topic2"
    <random element>
    <random element>
    <random element>
    <random element>
</section>

... Some space added ...
... e.g. margin-top: 100px

...etc

---

您可以通过使用换行符和css属性
display:table
和
display:table cell
以及
vertical align:middle

带有所需包装的HTML标记：

<section id="topic1">
    <div class="wrap">
        <div> aaaa</div>
        <div> aaaa</div>
    </div>
</section>


使用
行高
是一种更简单的方法，但您需要知道节的
高度

你可以找到更多的方法来实现它。
有两种不同的方法可以使用引导标记来实现你想要的。以下是一个例子：

.space {
  padding-bottom: 200px;
}

<section class="container space">
  <div id="scroll-to" class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
    </div>
  </div>
</section>
<section class="container space">
  <div id="scroll-to" class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
    </div>
  </div>
</section>

.space{
垫底：200px；
}







我将尝试并专注于偏移类，并研究如何使用.center块和.center文本。“中心块”将使元素居中对齐，而“中心文本”将对文本执行相同的操作。这将防止您的css膨胀，并使响应性设计的一切都可以预测

希望这能有所帮助。
谢谢你，阿尔瓦罗-我会给你一些评论。然而，我担心，将静态高度设置为220px会导致整个响应过程中出现问题，这是我试图避免的事情之一。我不想静态地定义截面高度，这只是一个例子。如果愿意，可以使用百分比进行设置，也可以使用相同的方法。经过进一步研究，使用表格确实是正确的方法，而且它确实同时支持宽度和高度的百分比。我认为可能需要调用JQuery来获取当前节高和当前视口高度。如果“剖面>视口”，则在顶部加载，否则计算差值的中间部分。
.space {
  padding-bottom: 200px;
}

<section class="container space">
  <div id="scroll-to" class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
    </div>
  </div>
</section>
<section class="container space">
  <div id="scroll-to" class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
    </div>
  </div>
</section>