如何垂直和水平居中填充形式？

Question

我正在使用prime ng 9.1.3和primeflex 1.3.0。我正在使用p-align-center。但是我无法使表格垂直和水平居中。我使用100vh表示全屏高度。

<div class="p-grid p-align-center" style="height: 100vh">
  <div class="p-col-6" style="text-align: center"> 
    <h2>Sample app</h2>
  </div>

  <div class="p-col-6" style="background-color: #f1f1f2; height: 100%;">
    <div>
      <form>
        <h4>LOGIN</h4>

        <!--Email Starts-->

        <span class="ui-float-label">
          <input id="float-input" type="email" size="50" pInputText />
          <label for="float-input">Email</label>
        </span>

        <!--Email Ends-->

        <div style="margin-top: 25px"></div>

        <!--Password Starts-->

        <span class="ui-float-label">
          <input id="float-input" type="password" size="50" pInputText />
          <label for="float-input">Password</label>
        </span>

        <!--Password Ends-->

        <div style="margin-top: 25px"></div>

        <p-button label="Login" styleClass="ui-button-success"></p-button>
      </form>
    </div>
  </div>
</div>

这是屏幕。

Answer 1

您可以尝试使用def callback(e): if int(e.char) in range(10): print(f'you pressed {e.char}') 创建第二列，然后将其中的元素对齐：

display:flex