如何定位顶部中心的表格？答案

【问题标题】：How to position the form that is in the centre at the top?如何定位顶部中心的表格？
【发布时间】：2022-08-14 04:36:43
【问题描述】：

我的意图是将<form> 放在<nav> 下方一点点，所以我想将它放在顶部。它已经在中心。我想让它响应，例如，当我进入移动模式时，表单应该位于中心，但也位于顶部，就在<nav> 下方。我已经尝试了几种方法来做到这一点，但都没有奏效。这是我的代码：

* {
  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;
  }
}

<!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 css

【解决方案1】：

在您的 container 类上，更改以下 CSS 样式：

display: grid;
place-items: center;

至

display: flex;
justify-content: center;

它应该工作。

根据您的描述，我假设您不希望表单拉伸到屏幕底部，因此请从此 container 中删除 height: 100vh，例如，将背景颜色应用于 body：

body {
  background: #343131;
}

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

body {
  background: #343131;
}

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%;
  background: #343131;
  display: flex;
  justify-content: 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;
  }
}

<!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>

【讨论】：