如何像3列布局一样垂直对齐布局（只是垂直）

Question

我想要一个垂直对齐的布局（移动）。它由一个应位于中间的主要部分（主要内容）组成。在这个部分的顶部和底部，应该有200px的自由空间，直到页面的边缘（是的，顶部：200px）。但是在这部分应该有一些文字，它不应该移动。

这张图应该解释一下：

如果事情不清楚，请随意提问！

代码：

我用“vh values”

尝试了

#container {
margin-top: 10vh;
margin-bottom: 10vh;
width: 100vw;
height: 80vh;
}

<div id="container"></div>

所以这是基本的事情，如果我这样做：

#container {
width: 100vw;
height: 80vh;
}

#top {
width: 100vw;
height: 10vh;
}

#bottom {
width: 100vw;
height: 10vh;
}

<div id="top></div>
<div id="container"></div>
<div id="bottom"></div>

然后它不适合我的屏幕，它总是有点太大，所以我必须滚动... 你们中有人有其他想法或改进来解决这个问题吗？

Answer 1

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
}
body {
  min-height: 100vh;
  position: relative;
}
header,
footer {
  width: 100%;
  height: 100px;
  background-color: rgba(0, 0, 0, .8);
  position: fixed;
  color: #fff;
  font-size: 80px;
  text-align:center;
  z-index: 10;
}
header {
  top: 0;
}
footer {
  bottom: 0;
}
main {
  min-height: 100vh;
  padding: 100px 200px;
  position: absolute;
  top: 0;
  box-sizing: border-box;
}

＆＃13;

<header>I'm a header</header>
<main>
  <p>I need your help ones again... So I want to have a (mobile) layout which is vertically aligned. It consists of a main part (with the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text too & it shouldn´t move.
  </p>
  <br>
  <p>
    I need your help ones again... So I want to have a (mobile) layout which is vertically aligned. It consists of a main part (with the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text too & it shouldn´t move.
  </p>
</main>
<footer>I'm a footer</footer>

＆＃13;

＆＃13;

＆＃13;