css - 在 100% 高度部分响应地调整内容(flexbox？)

Question

我是编码新手，我正在使用 Bootstrap 制作一个响应式单页滚动条。每个部分都是 height:100%，因此它会根据窗口的大小而变化。 我想知道如何证明我的内容是正确的，以便它在窗口中垂直居中，并且在该部分的不同对象之间具有相等的空间。我试过用 flexbox 做这个，但没有成功。我愿意使用 css、flexbox 或 js。

提前致谢!

这是每个部分的代码的简化版本:

name {
  height:100%;
}

<section class="name">
  <div class="container">
    <div class="row">
      <h1 class="col-xs-12">Header</h1>
      <p class="col-xs-12">Info</p>
      
      <img class="col-xs-12" src="-">
    </div>
  </div>
</section>

Answer 1

试试这个可能会有帮助:(css)

name {
height: 100%;
width: 100%;
display: block;
}