使用PrimeFlex垂直和水平地对整个表单进行居中

Question

我使用的是PrimeNG和PrimeFlex。我想把整个表单垂直和水平地居中，不包括手机上的sm，最好使用PrimeFlex类。

我尝试了下面的方法，它应该是水平的，但是它没有成功。

<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

另一个可能的原因是由于框高，您可以在我这里所做的回答(答案更多地是与引导相关的，但仅仅是相同的)中查看更多关于这个问题的信息：在页面中间引导对中容器。

您可以解决这类问题，要么创建自己的类，要么更新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>