Search code examples
htmlcssprimengprimeflex

Center the whole form vertically and horizontally using PrimeFlex

I'm using PrimeNG along with PrimeFlex. I want to center the whole form vertically and horizontally, excluding sm for phones and preferrably using PrimeFlex classes.

I tried the following, which should center it horizontally, but it didn't work out.

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

This one works. How is it possible? Both should be doing the same.

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

I'm using [email protected] and [email protected].

Snippet

<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>

enter image description here

Solution

  • That's due to the fact that you are using another version of PrimeFlex. Please, take a look at the Migration Guide: https://www.primefaces.org/primeflex/migration

    Another possible cause is due to boxes height, you can check more about this at the answer I made here (answer is more Bootstrap-related, but is merely the same): Bootstrap centering container in the middle of the page

    You can solve that type of problems either creating your own classes or updating your PrimeFlex library, which includes a lot new utilities, including height ones: https://www.primefaces.org/primeflex/height

    Hope the above links help you with your problem and good luck with your project!

    Edit: As recommended by @nop, here's a code snippet for 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>