I'm having trouble centering the contents of a div with my code. The properties I am applying don't seem to work. Any idea why this is happening?
<div class='center'>
<form (ngSubmit)="loginUser()" style="background: steelblue;" class='login-form'>
<p>
<mat-form-field>
<input type="text" [(ngModel)]='email' matInput placeholder="Email" name='email'>
</mat-form-field>
</p>
<p>
<mat-form-field>
<input type="password" [(ngModel)]='password' matInput placeholder="Password" name='password'>
</mat-form-field>
</p>
<div class="button">
<button type='submit' mat-raised-button>Login</button>
</div>
</form>
</div>
Here is the CSS I'm trying to apply:
.center {
display: flex;
background-color: #ff1124;
justify-content: center;
}
And here is the additional CSS:
.login-form .button button {
width: 100%;
background: #27803f;
color: white
}
Currently, my form appears like this: https://i.stack.imgur.com/r9YsJ.jpg