https://i.sstatic.net/8gdCo.png
Looking to vertically center align the login form. I've tried various solutions from Stack Overflow, but I'm new to Bootstrap 4. The goal is to position the logo at the top center of the login form, hence why I want the form centered on the page.
<style>
.form-style-5{
max-width: 500px;
padding: 10px 20px;
margin-top:2em;
margin: 10px auto;
margin-bottom: 1em;
padding: 30px;
background-color: #ffffff;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.container{
margin-bottom: 2em;
}
</style>
</head>
<body style="background-color:rgb(20, 96, 131)">
<div class="container" style="padding:50px">
<form class="form-style-5" method="post">
<h1 style="font-family:verdana" class="text-center">Sign up</h1>
{% csrf_token %}
<table>
{{user_form | crispy}}
{{details_form | crispy}}
<button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit" style="background-color:rgb(20, 96, 131); border: 0px">Sign up</button>
</form>
<hr>
<div class= "row">
<div class="col-sm-6"><a href="/login" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color:rgb(20, 96, 131); border: 0px">Login</a></div>
<div class="col-sm-6"><a href="/seller_signup" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color:rgb(20, 96, 131); border: 0px">Seller's Sign-up</a></div>
</div>
</table>
</div>
</body>
</html>