使用 PrimeFlex 将整个表格垂直和水平居中

Center the whole form vertically and horizontally using PrimeFlex

我正在使用 PrimeNG 和 PrimeFlex。我想将整个表格垂直和水平居中,不包括手机的 sm 并且最好使用 PrimeFlex classes.

我尝试了以下方法,它应该水平居中,但没有成功。

<div class="p-grid-nogutter flex justify-content-center align-items-center">

这个有效。这怎么可能?两者应该做同样的事情。

<div class="p-grid-nogutter" style="display: flex; justify-content: center; align-items: center">

我正在使用 PrimeFlex@2.0.0 和 PrimeNG@12.0.0。

片段

<div class="p-grid-nogutter">
  <div class="p-xl-3 p-lg-3 p-md-6 p-sm-12">
    <div class="card">
      <h5>Login</h5>
      <div class="p-fluid">
        <form [formGroup]="authForm" (submit)="signIn()">
          <div class="p-field">
            <label for="username">Username</label>
            <input id="username" type="text" pInputText formControlName="username" />
          </div>
          <div class="p-field">
            <label for="password">Password</label>
            <input type="password" id="password" pPassword formControlName="password" />
          </div>
          <button pButton type="submit" label="Login" [disabled]="!authForm.valid"></button>
        </form>
      </div>
    </div>
  </div>
</div>

那是因为您使用的是另一个版本的 PrimeFlex。请查看迁移指南:https://www.primefaces.org/primeflex/migration

另一个可能的原因是盒子的高度,你可以在我在这里的答案中查看更多相关信息(答案与 Bootstrap 相关,但只是一样):

您可以通过创建自己的 类 或更新您的 PrimeFlex 库来解决此类问题,其中包含许多新实用程序,包括高度实用程序:https://www.primefaces.org/primeflex/height

希望以上链接能帮助您解决问题,祝您项目顺利!

编辑:根据@nop 的建议,这是 PrimeFlex < 3.0.0 的代码片段:

<div class="p-grid p-nogutter p-d-flex p-justify-center p-ai-center" style="height: 100%; min-height: 100vh">
  <!-- Your HTML code goes right here -->
</div>