title: Center the whole form vertically and horizontally using PrimeFlex
body: <p>I'm using PrimeNG along with PrimeFlex. I want to center the whole form vertically and horizontally, excluding <code>sm</code> for phones and preferrably using <a href="https://www.primefaces.org/primeflex/gridsystem" rel="nofollow noreferrer">PrimeFlex classes</a>.</p>
  <p>I tried the following, which should center it horizontally, but it didn't work out.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;p-grid-nogutter flex justify-content-center align-items-center&quot;&gt;
  </code></pre>
  <p>This one works. How is it possible? Both should be doing the same.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;p-grid-nogutter&quot; style=&quot;display: flex; justify-content: center; align-items: center&quot;&gt;
  </code></pre>
  <p>I'm using PrimeFlex@2.0.0 and PrimeNG@12.0.0.</p>
  <h3>Snippet</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;p-grid-nogutter&quot;&gt;
    &lt;div class=&quot;p-xl-3 p-lg-3 p-md-6 p-sm-12&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;h5&gt;Login&lt;/h5&gt;
        &lt;div class=&quot;p-fluid&quot;&gt;
          &lt;form [formGroup]=&quot;authForm&quot; (submit)=&quot;signIn()&quot;&gt;
            &lt;div class=&quot;p-field&quot;&gt;
              &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
              &lt;input id=&quot;username&quot; type=&quot;text&quot; pInputText formControlName=&quot;username&quot; /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;p-field&quot;&gt;
              &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
              &lt;input type=&quot;password&quot; id=&quot;password&quot; pPassword formControlName=&quot;password&quot; /&gt;
            &lt;/div&gt;
            &lt;button pButton type=&quot;submit&quot; label=&quot;Login&quot; [disabled]=&quot;!authForm.valid&quot;&gt;&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/zB83x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zB83x.png" alt="enter image description here" /></a></p>