Html 如何根据窗口高度使元素滚动或居中 我有一个元素集中在页面的中间。如果页面缩小到小于元素的高度，我仍然需要显示元素的顶部，而不是居中。我希望元素的容器是可滚动的

。卡片显示{
保证金：自动；
最高：50%；
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
宽度：300px；
高度：400px；
背景颜色：灰色；
边界半径：10px；
}

始终需要顶行可见（即，如果有足够的容器高度来容纳灰色元素，则应垂直居中，否则容器会滚动）

如果对您有效，请检查此选项： 包装卡片显示以应用Flex居中方式。

html:

始终需要顶部线条可见

以下是使用您的代码的示例：Flexbox解决的另一个问题。。很简单。这是答案，但我如何标记为答案并关闭它？它作为一个复制品关闭，因此无需标记。fiddle只是帮助我快速更新代码。除了显示结果的JSFIDLE之外，请在此提供提供解决方案的最小代码。

.container {
  display:flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  width: 100%;
  height: 100%;
}
.card-display {
  align-items:center;
  position:absolute;
  width: 300px;
  height: 400px;
  border-radius: 10px;
  background-color: gray
}
@media screen and (max-height:400px) {
 body {
   background-color: blue;
 }
 .container {
   align-items:baseline;
 }
}

<div class="container">
 <div class="card-display">
  <div>
   always need top line visible
  </div>
 </div>
</div>