Flex 框问题 - 中心元素在溢出时被截断

Question

我正在使用一些弹性框属性将一个简单的 div 放置在屏幕中央：

//CSS

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div {
    height: 500px;
    width: 500px;
    background-color: red;
    border: 5px solid black;
}

//HTML

<div></div>

它运行完美，但是当我将屏幕高度减小到小于我的 div（小于 500px）时，我最终得到了一个奇怪的截断：我可以向下滚动并看到底部边框，但由于某种原因，当我向上滚动时，我无法到达顶部边框，它是隐藏的。

我是不是漏掉了什么？任何人都知道如何解决这个问题？我创建了一个代码笔来演示这个问题：https://codepen.io/stepinsight/full/MqmEME

非常感谢您的帮助！

Answer 1

相反 align-items:center; 您可以在 flex 子项上使用 margin:auto 使其居中：

html {
 width: 100%;
 height: 100%;
}

body {
 width: 100%;
 height: 100%;
 margin: 0px;
 display: flex; 
 justify-content: center;
}

div {
 height: 500px;
 width: 500px;
 background-color: red;
 border: 5px solid black;
 margin:auto;
}

<div></div>

fork of your pen 注意： justify-content 也从 codepen 上删除，当 margin:auto; 对于 flex 子项适用于两个轴时。 flex-shrink:0; 还添加了容器，因此当屏幕的宽度也变小时，容器不会水平收缩（也隐藏左边框）。

Flex 框问题 - 中心元素在溢出时被截断

Flex box issue - Center Element truncated on overflow

html

css

overlay

center

flexbox