Having trouble aligning the login box to the center of the page. Any suggestions on how to achieve this?
https://i.sstatic.net/3AFoL.png
The following code attempts to achieve center alignment using Bootstrap 4.x
base_nologin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Rest of the header files -->
</head>
<body>
<div class="d-flex" id="wrapper">
<div id="page-content-wrapper">
<main>
<div class="container-fluid">
{% block content %}
{% endblock %}
</div>
</main>
</div>
</div>
<footer class="bg-light border-right card-footer fixed-bottom">
<div class="container">
<p class="m-0 text-center text-black">
Test
</p>
<p class="m-0 text-center text-black">Copyright © 2020</p>
</div>
</footer>
<script src="/vendor/jquery/jquery.min.js">
</script>
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Rest of the scripts -->
</body>
</html>
Using flask jinja2 templates to render the login form at the center with:
{% extends "base_nologin.html" %}
{% block moreHeadFiles %}
{% endblock %}
{% block content %}
Login Form HTML goes here
{% endblock %}
{% block moreScripts %}
{% endblock %}
_navbar_nologin.html
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
</nav>
CSS styles for login form and alignment:
.center {
display:flex;
align-items:center;
}
.wrapper {
margin: 0 auto;
max-width: 960px;
padding: 20px;
}
Attempting to center align a login box on the page. Any advice on achieving this alignment?