Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Login Form Design in Angular Material
.login-form-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.button-flex-container {
display: flex;
width: 100%;
justify-content: flex-end;
<div class="login-form-flex">
<input matInput placeholder="User Name">
<input type="password" matInput placeholder="Password"/>
<div class="button-flex-container">
<button mat-raised-button color="primary">Login</button>
Copy link

tarikguney commented Jan 11, 2019

The CSS uses FlexBox properties to align content. The login form is centered in the screen both horizontally and vertically.

The following shows how the login looks like in a browser:


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment