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

Question

我正在使用 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>

Answer 1

那是因为您使用的是另一个版本的 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>

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

Center the whole form vertically and horizontally using PrimeFlex

html

css

primeng

primeflex

片段