你可以用flexbox来居中。类似的东西应该很好

#container {
  min-height: 100vh;
  background-color: green;
  display: flex;
  flex-direction: column;
}

#topBar {
  background-color: yellow;
  top: 0;
}

#mainBox {
  background-color: orange;
  margin: 20px 0;
}

body {
margin: 0;
}

.center {
  display: flex;
  flex: 1;
  align-items: center;
}

<div id="container">
  <div id="topBar">Height of this is unknown!<br>.</div>
  <div class="center">
  <div id="mainBox">Height of this is also unknown. It should be vertically in the center of the REMAINING VISIBLE green area<br>.</div>
  </div>
</div>

您可以将绿色容器的高度设置为auto，这意味着它的高度将基于其内容长度。

#container {
  min-height: 100vh;
  background-color: green;
  display: flex;
  flex-direction: column;
}

#topBar {
  background-color: yellow;
  top: 0;
}

#mainBox {
  background-color: orange;
  margin: auto 0; /*Here is changed*/
}

body {
margin: 0;
}

<div id="container">
  <div id="topBar">Height of this is unknown!<br>.</div>
  <div id="mainBox">Height of this is also unknown. It should be vertically in the center of the REMAINING VISIBLE green area<br>.</div>
</div>