I'm currently working on a MVC website that features a login/signup form. I have been trying to utilize bootstrap to format the forms. My main goal is to center the entire form on the screen, but so far I have only been successful in centering it on the horizontal axis. I have experimented with various options such as 'justify-content-center', 'align-items-center', 'align-self-center', and 'align-content-center', but none of them have had the desired effect on the layout of my page.
Below is the code I have been working with:
<div class="d-flex justify-content-center">
<div class="login-card">
<h2 class="page-title">Signup</h2>
<form class="form signup-form">
<div class="form-group">
<label for="username-signup">Username:</label>
<input class="form-input" type="text" id="username-signup" />
</div>
<div class="form-group">
<label for="email-signup">Email:</label>
<input class="form-input" type="text" id="email-signup" />
</div>
<div class="form-group">
<label for="password-signup">Password:</label>
<input class="form-input" type="password" id="password-signup" />
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">signup</button>
</div>
</form>
</div>
</div>
</div>