I'm really struggling with understanding the documentation of vertically and horizontally aligning with a flexbox. I am using the MD SignUp code snippet and simply want to vertically and horizontally align it using a flexbox. Below is my code. Can someone show me how to vertically and horizontally align it please?

<div class="container d-flex flex-column w-50 justify-content-center">
 <!--Register form-->
 <form>
 <p class="h5 text-center mb-4">Sign up</p>
<div class="md-form">
 <i class="fa fa-user prefix grey-text"></i>
 <input type="text" id="orangeForm-name" class="form-control" mdbActive>
 <label for="orangeForm-name">Your name</label>
 </div>
 <div class="md-form">
 <i class="fa fa-envelope prefix grey-text"></i>
 <input type="text" id="orangeForm-email" class="form-control" mdbActive>
 <label for="orangeForm-email">Your email</label>
 </div>
<div class="md-form">
 <i class="fa fa-lock prefix grey-text"></i>
 <input type="password" id="orangeForm-pass" class="form-control" mdbActive>
 <label for="orangeForm-pass">Your password</label>
 </div>
<div class="text-center">
 <button class="btn btn-deep-orange waves-light" mdbRippleRadius>Sign up</button>
 </div>
</form>
 <!--/Register form-->
</div>