如何在框架上水平和垂直居中多个表单元素？

Question

问题

我已经咨询了这个resource和resource，但是我的表单元素仍然没有像他们应该的那样居中（我尝试过flex，我尝试过填充，我试过了伸展等）。我希望两个表单字段在屏幕上垂直和水平居中。

我已将表单元素包装在div中，但它仍然无法正常工作。如果有人能让我知道如何做到这一点，将不胜感激！

我希望这些字段显示在彼此之下。我希望字段在屏幕上垂直和水平居中。

代码

body {
    background: #3472FF;
    color: white;
}

.closeBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: white;
}

.login {
    display: flex;
    justify-content: center;
    align-items: center;
}

.field {
    display: block;
}

 <button class="closeBtn"><span class="icon-x"></span></button>
    <form action="form.php" method="post">
        <div class="login">
            <div class="field">
                <input type="text" name="username" placeholder="Username"> </div>
            <div class="field">
                <input type="text" name="password" placeholder="Password"> </div>
        </div>
    </form>

Answer 1

几乎所有元素的

flex-direction: column;和height: 100%都可以解决问题：

html,
body {
  height: 100%;
}

body {
  background: #3472FF;
  color: white;
}

.closeBtn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2em;
  color: white;
}

form {
  height: 100%;
}

.login {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.field {
  display: block;
}

<button class="closeBtn"><span class="icon-x"></span></button>
<form action="form.php" method="post">
  <div class="login">
    <div class="field">
      <input type="text" name="username" placeholder="Username"> </div>
    <div class="field">
      <input type="text" name="password" placeholder="Password"> </div>
  </div>
</form>

Answer 2

尝试：           top: 0; 右：0;           bottom: 0; 左：0; 在您的CSS上