html - 如何使容器中的表单居中？使用 flex

Question

我正在使用 flex，我有一个容器并且想要在里面有一个表单。这就是现在的样子。

因此，在那个蓝色容器内，我希望表单看起来漂亮且居中。蓝色容器是一个 flex。这是我在那个蓝色容器里的东西:

<div class="formulario">
    <form>
        First name:
        <input type="text" name="firstname"><br>
        Last name:
        <input type="text" name="lastname"><br>
        Email :
        <input type="text" name="email"><br>
        Username:
        <input type="text" name="username"><br>
        Password:
        <input type="password" name="password">
    </form>
</div>

这是CSS

.formulario {
    background-color: blue;
    flex : 3;
    display:flex;
    flex-direction: column;

    align-items: center;
    form{
        /*margin:3px; */
    }
}

我想将这些表格居中，理想情况下将它们隔开一点，并使它们相对于容器更大。

Answer 1

 
.formulario{
background-color: blue;
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:white;
}

<div class="formulario">
    <form>
      <table>
        <tr>
          <td>First name:</td>
          <td><input type="text" name="firstname"></td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td><input type="text" name="lastname"></td>
        </tr>
        <tr>
          <td>Email:</td>
          <td><input type="text" name="email"></td>
        </tr>
        <tr>
          <td>Username:</td>
          <td><input type="text" name="username"></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td><input type="password" name="password"></td>
        </tr>
      </table>
    </form>
</div>