我怎样才能使表格垂直居中，以便我可以将登录放在顶部中心？

Question

我想将它垂直居中对齐。我怎样才能做到这一点？我已经尝试了很多关于堆栈溢出的建议。我是 bootstrap 4 的新手。我想将登录放在登录表单的顶部中心，这就是为什么我希望表单位于页面中心的原因


    <style>

    .form-style-5{
      max-width: 500px;
      padding: 10px 20px;
      margin-top:2em;
      margin: 10px auto;
      margin-bottom: 1em;
      padding: 30px;
      background-color: #ffffff;
      border-radius: 8px;
      font-family: Georgia, "Times New Roman", Times, serif;
    }

    .container{
      margin-bottom: 2em;
    }
    </style>
</head>
<body style="background-color:rgb(20, 96, 131)">
      <div class="container" style="padding:50px">
    <form class="form-style-5" method="post">
      <h1 style="font-family:verdana" class="text-center">Sign up</h1>
        {% csrf_token %}
        <table>
        {{user_form | crispy}}
        {{details_form | crispy}}
        <button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit" style="background-color:rgb(20, 96, 131); border: 0px">Sign up</button>
    </form>
    <hr>
    <div class= "row">
      <div class="col-sm-6"><a href="/login" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color:rgb(20, 96, 131); border: 0px">Login</a></div>
    <div class="col-sm-6"><a href="/seller_signup" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color:rgb(20, 96, 131); border: 0px">Seller's Sign-up</a></div>
    </div>
  </table>
</div>
</body>
</html>

Answer 1

如果您的意思是整个表单本身以页面为中心，您可以将它严格地放在容器中以进行定位，并使用视口单位来放置它。这样，您就不会试图定位表单的容器并同时尝试格式化它。您可以使用 container class 和 position with absolute、left 等，但这似乎是一种破坏性较小的方法。让我知道你的想法。如果您希望表格更高，您可以根据需要操作这些值，但我只是为了示例目的而完全居中。

.form-style-5 {
  max-width: 500px;
  padding: 10px 20px;
  margin-top: 2em;
  margin: 10px auto;
  margin-bottom: 1em;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.container {
  margin-bottom: 2em;
}

.position {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

<html>

<body style="background-color:rgb(20, 96, 131)">
  <div class="position">
    <div class="container" style="padding:50px">
      <form class="form-style-5" method="post">
        <h1 style="font-family:verdana" class="text-center">Sign up</h1>
        {% csrf_token %}
        <table>
          {{user_form | crispy}} {{details_form | crispy}}
          <button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit" style="background-color:rgb(20, 96, 131); border: 0px">Sign up</button>
        </table>
        <hr>
        <div class="row">
          <div class="col-sm-6"><a href="/login" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color:rgb(20, 96, 131); border: 0px">Login</a></div>
          <div class="col-sm-6"><a href="/seller_signup" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color:rgb(20, 96, 131); border: 0px">Seller's Sign-up</a></div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

我怎样才能使表格垂直居中，以便我可以将登录放在顶部中心？

How can i center the form vertically so that I can place logon on top-center?

html

css

bootstrap-4