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 的尺寸（小于 500 像素）时，我会得到一个奇怪的截断：我可以向下滚动并看到底部边框，但由于某种原因，当我向上滚动我无法到达顶部边框，它被隐藏了。

我错过了什么吗？任何人都知道如何解决这个问题？ 我创建了一个 codepen 来演示这个问题：https://codepen.io/stepinsight/full/MqmEME

非常感谢您的帮助！

Answer 1

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

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;，因此容器不会水平收缩（并且还隐藏左边框），同时屏幕的宽度也会变小。