added better vertically and horizontally align code

redbrickboard/accounts/templates/accounts/login.html

@@ -5,6 +5,7 @@
 {% endblock %}
 
 {% block content %}
+<div id="login-container" class="d-flex my-5">
     <div id="login-form" class="mx-auto px-3 py-4 bg-white" style="width: 23rem;">
         <p class="h1">Log in</p>
         <form method="POST" autocomplete="off">
@@ -37,5 +38,5 @@
             </div>
         </form>
     </div>
-
+</div>
 {% endblock %}
\ No newline at end of file

redbrickboard/static/css/custom.css

@@ -88,15 +88,12 @@ body {
      height: 100vh;
 }
 
+#login-container {
+     align-items: center;
+     justify-content: center;
+}
+
 #login-form {
-     /* Really Bad Code Start */
-     margin: 0;
-     position: absolute;
-     top: 50%;
-     left: 50%;
-     -ms-transform: translate(-50%, -50%);
-     transform: translate(-50%, -50%);
-     /* Really Bad Code End */
      border-radius: 0.625rem;
      border: 1px solid #000;
      background: #FFF;