使页面居中，只要它不会在 CSS 中溢出

Question

我有一个网页，它的主体会随着时间的推移（通过用户点击等）扩展，我想居中（垂直）。

我还希望它在内容超过页面高度（溢出时）时可以滚动，但它必须与页面顶部对齐。

我希望它表现得像这样，我想用flexbox实现它：

有什么想法吗？

Answer 1

如果可能，使用类属性“容器”和“盒子”定义新标签

窗口 -> .container

正文 -> .box

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  align-items: center;
  height: 100vh;
  overflow: scroll;
}

.box {
  background-color: yellow;
}

<div class="container">
  <div class="box">
    this is box
  </div>
</div>

Answer 2

这是flex box的一个

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  background: darkcyan;
  width: 60%;
  padding: 5%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.content {
  background: cyan;
  width: 80%;
  overflow-y: scroll;
  max-height: 400px;
  text-align: center;
}

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>