实现表单在全屏幕尺寸下居中且响应式的问题求助

大家好，我现在遇到个棘手的问题：我想让我的表单始终保持在屏幕中间，并且能根据网站中间区域的大小自适应缩放。目前大部分屏幕尺寸下表现还行，但当屏幕变小的时候，表单会和导航栏、footer重叠，因为表单本身的尺寸不会跟着调整。

下面是我的表单、导航栏、主体和footer的样式代码，其他表单的样式也差不多：

HTML 与 CSS 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sign Up</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
height: 70px;
padding: 0 20px;
background-color: white;
top: 0;
left: 0;
}

.topnav{
width: 100%;
height: calc(100vh / 10);
background-color: #2B78E4;
display: flex;
align-items: center;
overflow: hidden;
/*justify-content: space-between;*/
}

.topnav a{
text-decoration: none;
color: black;
font-family: "Helvetica", sans-serif;
}

.dropbtn {
background-color: #fff1f1;
color: Black;
padding: 8px 16px;
}

.dropdown {
position: relative;
display: inline-block;
padding: 8px 16px;
font-style: inherit;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #f6f6f6;
}

.nav-btn{
background-color: #fff1f1;
color: Black;
padding: 8px 16px;
}

#login-btn{
position: relative;
display: inline-block;
margin-left: auto;
}

#signUp-btn{
position: relative;
display: inline-block;
float: right;
padding-left: 20px;
}

#login-btn, #signUp-btn {
float: right;
}

#nav-teams{
position: relative;
padding-left: 20px;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
background-color: #666666;
}

footer {
background-color: #999999;
background-size: 50px;
height : calc(100vh/8);
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
overflow: hidden;
}

.footer-links {
display: flex;
align-items: center;
}

.footer-links a {
margin-left: 20px;
}

#signup-title-init{
margin-bottom: 10px;
}

#signup-title-init h2 {
font-size: 24px;
font-weight: bold;
text-align: center;
overflow-wrap: break-word;
}

#signup-body-init h1 {
font-size: 16px;
font-weight: bold;
text-align: center;
}

#signup-body-init p {
font-size: 16px;
text-align: center;
}

#signup-footer-init p {
font-size: 14px;
text-align: center;
}

#signup-footer-init{
border-top:1px solid ;
}

.entry{
width:100%;
}

#signup-footer-init a {
font-size: 14px;
text-align: center;
}

.popup-signup-init {
border: 2px solid black;
padding: 10px;
width: 45%;
max-width: 400px;
background-color: #999;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: visible;
}

.terms-container {
display: flex;
align-items: center;
}

.resend-container {
display: flex;
align-items: center;
}

#terms-link{
color:blue;
}

#terms{
margin-right: 5px;
}

#termsError{
display:none;
color:red;
}
</style>
</head>
<header>
<div class="topnav" id="myTopnav">
<a href = homepage.html>
<img src="images/fb-helmet.png" alt="Logo" class = "helmet-logo">
</a>
<div class="teams-btn" id="nav-teams">
<button class="nav-btn" ><a href="Teams.html">Teams</a></button>
</div>
<div class="dropdown">
<button class="dropbtn">Seasons
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Seasons.html">2022</a>
<a href="www.collegefbarchive.com/seasons/2021">2021</a>
<a href="www.collegefbarchive.com/seasons/2020">2020</a>
</div>
</div>
<div id="login-btn">
<button class = "nav-btn" ><a href="SignIn.html">Log In</a></button>
</div>
<div id="signUp-btn">
<button class="nav-btn" ><a href ="Signup.html">Sign Up</a></button>
</div>
</div>
</header>
<body>
<form id="signUp-init">
<div class="popup-signup-init">
<div id="signup-title-init">
<h2>Sign Up for CollegeFB-Archive</h2>
</div>
<div id="signup-body-init">
<label for="email">Email:</label><br>
<input class="entry" type="email" id="email" name="email" required>
<label for="fullname">Full Name:</label><br>
<input class="entry" type="text" id="fullname" name="fullname" required>
<label for="password">Password:</label><br>
<input class="entry" type="password" id="password" name="password" required>
<label for="password">Confirm Password:</label><br>
<input class="entry" type="password" id="confirm-password" name="password" required>
<div class="terms-container">
<input type="checkbox" id="terms" name="terms">
<label for="terms">I agree to the </label><a id="terms-link" href="Terms%20of%20Use.html">Terms of Service</a>
</div><br>
<p id="termsError" >You must accept the terms of service.</p>
<input type="submit" value="Continue">
</div>
<div id="signup-footer-init">
<div class="resend-container">
<p>Did not get the email?</p><a href="#">Click here</a>
</div>
</div>
</div>
</form>
</body>
<footer>
<div class="footer-logo">
<a href = homepage.html>
<img src="images/fb-helmet.png" alt="Logo" class="helmet-logo">
</a>
</div>
<div class="footer-links">
<a href="Contact.html">Contact Us</a>
<a href="Terms%20of%20Use.html">Terms of Use</a>
</div>
</footer>
</html>

我尝试过的方法 #

• 调整过 position 属性，但除了 absolute 之外，其他值都会让表单往上跑，和导航栏重叠甚至超出可视区域；
• 调整过表单所在 div 的高度和宽度，虽然能改变容器大小，但里面的输入框和标签不会跟着适配。

有没有大佬能帮忙看看怎么解决这个问题，让表单在小屏幕下也能正常居中，不会和导航栏、footer重叠，同时内部元素也能响应式缩放？

备注：内容来源于stack exchange，提问作者calkinss1