I am currently using prime ng 9.1.3 along with primeflex 1.3.0 in my project. Despite applying p-align-center, I am facing difficulty in vertically and horizontally centering the form on the screen when using a full screen height of 100vh.
<div class="p-grid p-align-center" style="height: 100vh">
<div class="p-col-6" style="text-align: center">
<h2>Sample app</h2>
</div>
<div class="p-col-6" style="background-color: #f1f1f2; height: 100%;">
<div>
<form>
<h4>LOGIN</h4>
<!--Email Starts-->
<span class="ui-float-label">
<input id="float-input" type="email" size="50" pInputText />
<label for="float-input">Email</label>
</span>
<!--Email Ends-->
<div style="margin-top: 25px"></div>
<!--Password Starts-->
<span class="ui-float-label">
<input id="float-input" type="password" size="50" pInputText />
<label for="float-input">Password</label>
</span>
<!--Password Ends-->
<div style="margin-top: 25px"></div>
<p-button label="Login" styleClass="ui-button-success"></p-button>
</form>
</div>
</div>
</div>
This is how the layout appears on the screen.