如何将已居中的<form>元素定位到<nav>下方顶部位置？

我需要把<form>元素放在<nav>元素下方稍靠上的顶部位置，目前表单已实现水平居中，但调整后要满足响应式要求：切换到移动端模式时，表单仍保持水平居中且位于导航栏下方顶部位置。尝试多种方法均未成功，现有代码如下：

CSS 代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
}

nav {
  height: 80px;
  width: 100%;
  background-color: #2b2d2e;
  background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);
}

nav i {
  color: #d35858;
  cursor: pointer;
  font-size: 40px;
  padding-top: 20px;
  padding-right: 20px;
  float: right;
}

.container {
  width: 100%;
  height: 100vh;
  background: #343131;
  display: grid;
  place-items: center;
}

.container form textarea {
  resize: none;
}

.container form {
  background: rgb(82, 81, 81);
  display: flex;
  flex-direction: column;
  padding: 2vw 4vw;
  width: 90%;
  max-width: 600px;
  border-radius: 10px;
}

form h3 {
  color: rgb(213, 118, 118);
  font-weight: 800;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
}

form input,
form textarea {
  border: 0;
  margin: 10px 0;
  padding: 20px;
  outline: none;
  background: #d9cece;
  font-size: 16px;
}

form button {
  padding: 15px;
  color: #fff;
  background: rgb(221, 107, 107);
  font-size: 18px;
  border: 0;
  outline: none;
  cursor: pointer;
  width: 150px;
  margin: 20px auto 0;
  border-radius: 30px;
}

form button:hover {
  background: rgb(236, 240, 239);
  transition: 0.75s;
}

.nav-link {
  height: 100vh;
  position: fixed;
  width: 100%;
  display: grid;
  place-items: center;
  background-color: rgb(42, 43, 43);
  left: -100%;
  transition: 0.5s;
}

.nav-link a {
  text-decoration: none;
  color: #fff;
  font-size: 30px;
  display: block;
  text-align: center;
  font-weight: bold;
  padding: -100px;
}

a:hover,
a.active {
  transition: .5s;
  color: rgb(239, 122, 122);
}

.nav-link ul li {
  padding: 18px;
}

.nav-link ul {
  list-style: none;
  margin-top: -50vh;
}

.nav-bar-top ul {
  padding-top: 32px;
  float: right;
  padding-right: 80px;
}

.nav-bar-top ul li {
  display: inline-block;
  padding-left: 15px;
}

.nav-bar-top ul li a {
  color: #d5c9c9;
  text-decoration: none;
}

.nav-bar-top ul li a.active {
  color: #fa9e9e;
}

.nav-bar-top ul li a:hover {
  color: #d35858;
}

@media(min-width: 800px) {
  #nav-bar-icon {
    display: none;
  }
}

@media(max-width: 800px) {
  .nav-bar-top ul {
    display: none;
  }
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Page</title>
  <link rel="stylesheet" href="../css/contact.css">
  <script src="https://kit.fontawesome.com/f2665b7baf.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <label id="nav-bar-icon">
            <i class="fa-solid fa-bars"></i>
        </label>
    <div class="nav-bar-top">
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a class="active" href="#">CONTACT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">FEEDBACK</a></li>
      </ul>
    </div>

  </nav>

  <div class="nav-link">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a class="active" href="#">CONTACT</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">FEEDBACK</a></li>
    </ul>
  </div>

  <div class="container">

    <form action="https://formsubmit.co/c2dd7f214ec3e502a5410ae72d612526" method="POST">
      <h3>Contact us! </h3>
      <!--                 hint for the content of input /  required to give input-->
      <input class="input_text" type="text" name="name" tabindex="1" placeholder="Your Name" required>
      <br>
      <input class="input_text" type="email" name="email" tabindex="2" placeholder="Your Email" required>
      <br>
      <textarea class="input_text" name="message" tabindex="3" placeholder="Your question" required></textarea>
      <br>
      <button type="submit">Send</button>
      <input type="hidden" name="_captcha" value="false">
      <input type="hidden" name="_next" value="http://127.0.0.1:5500/html/thanks.html">


    </form>


  </div>
  <script src="../js/index.js"></script>


</body>
</html>

解决方案 #

核心问题是原.container使用height:100vh和place-items:center导致表单垂直居中，只需修改.container的样式即可实现需求：

/* 修改后的.container样式 */
.container {
  width: 100%;
  background: #343131;
  padding: 2rem 0; /* 调整此值控制表单与导航栏的间距 */
  display: flex;
  justify-content: center; /* 保持水平居中 */
  min-height: calc(100vh - 80px); /* 可选：确保容器覆盖导航栏下方的视口高度 */
}

说明 #

1. 移除height:100vh和place-items:center，改用display:flex+justify-content:center维持水平居中。
2. 通过padding-top设置表单与导航栏的距离，让表单靠顶部显示，2rem可根据需求调整。
3. min-height: calc(100vh - 80px)是可选配置，目的是让容器背景色覆盖导航栏下方的整个视口，避免页面滚动时背景中断。
4. 此修改无需额外媒体查询，移动端会自动继承样式，保持表单居中且位于导航栏下方顶部。

内容的提问来源于stack exchange，提问作者szabolcsthepythonbeginner08