我有以下div：
<body>
<div class='centre'>
<h1>Contact Me</h1>
<a class="button" href="home.html">Home</a>
<a class="button" href="About">About</a>
<p>Use this form to contact me:</p>
</div>
</body>
我在body和div上使用了以下CSS：
.centre{
position: absolute;
height: 90vh;
overflow: auto;
width: 90vw;
top: 50vw;
left: 50vw;
padding: 1vw;
margin-top: 20vw;
margin-bottom: 5vw;
transform: translate(-50%, -50%);
text-align: center;
background: white;
box-shadow: 0px 0px 24px #000000;
height: min-content;
}
body{
background-color: #FA8BFF;
height: 100vh;
margin: 0;
}
当我向div添加越来越多的内容，使内容不适合屏幕时，高度会扩展，但顶部会离开屏幕，尽管指定了margin-top: 20vw;。我注意到，只有当我将窗口调整为非常小时，才会出现这种情况，但底部边距似乎总是保持不变。当我在大型监视器上查看页面时，上边距会变得不成比例地大，并将div内容向下推得很远，而下边距仍然保留。我也尝试过使用百分比值，但它们也造成了问题。
我应该修复什么？谢谢
我已经设置了以像素为单位的边距。它运行良好。现在，您可以添加任意数量的元素。
https://codepen.io/Rishab2019/pen/NWGgYBX
.centre{
position: absolute;
height: 90px;
overflow: auto;
width: 90vw;
top: 50px;
left: 3.5vw;
padding: 1vw;
margin-top: 20px;
margin-bottom: 5vw;
text-align: center;
background: white;
box-shadow: 0px 0px 24px #000000;
height: min-content;
}
body{
background-color: #FA8BFF;
height:100vw;
margin: 0;
}