如何使prime ng表格垂直和水平居中？

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

您可以尝试使用第二列display:flex，然后对齐其中的元素：

/* Of course, you need to use a different selector,
   since you don't want to apply these styles to all elements with this class */
.p-col-6 {
 display: flex;
 justify-content: center;
 align-items: center;
}