Question

我正在使用一些flex box属性将一个简单的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

代替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子代的margin:auto;在两个轴上都工作时，flex也会从代码笔上删除。还添加了flex-shrink:0;，以使容器不会水平缩小（也不会隐藏左边框），同时屏幕的宽度也会变小。

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

1 个答案: