I am brand new to front end and am practising by building a fake e-commerce website. I've had a few issues but ran into one where I am not sure the best way to solve them. I would like my form to be centred in the middle of the page. The reason why it is complicated is because I had an issue where my viewport was too large due to the lack of content on the page itself, there was a huge white space under my footer. My way of solving this was just simply making the view height of the form itself be 85%, because of this I am not sure how to centre my form horizontally on the page. What would be the best way to solve this issue? Any help is greatly appreciated! Attached will be a screenshot and the code
代码如下：
{% extends 'base.html' %}
{% load static %}
{% block css_files %}
<link rel="stylesheet" href="{% static 'login-out.css' %}">
{% endblock %}
{% block content %}
<div class="container-fluid" id='loginout'>
<div class="container-fluid text-center pt-3">
{% if next %}
{% if user.is_authenticated %}
<p>Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% else %}
<p><strong> Please login to see this page.</strong></p>
{% endif %}
{% endif %}
</div>
<section id="form-test">
<div class="container w-25 py-3" id='login-wrapper'>
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
{{ form.username.label_tag }}
{{ form.username }}
{{ form.password.label_tag }}
{{ form.password }}
{{ form.non_field_errors }}
</div>
<input class='btn btn-outline-primary' type="submit" value="Login" />
<input type="hidden" name="next" value="{{ next }}" />
</form>
{# Assumes setup the password_reset view in URLconf #}
<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
</div>
</section>
</div>
{% endblock %}
and css
#loginout {
background: #fef8f5;
height: 85vh;
}
#container-text-center-pt-3 a {
text-decoration: none !important;
}
#wrapper {
background: #fef8f5;
height: 100vh;
}
.form-control:focus {
border-color: #d66534;
box-shadow: 0 0 0 0.2rem rgb(230, 77, 11, 0.25);
}
#login-wrapper {
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
要垂直居中容器，必须将父级设置为 min-height 100vh 和 height 100%，然后可以向父级添加 flex 以使其居中。下面是一个例子：
HTML:
<div class="parent container d-flex justify-content-center align-items-center h-100">
<div class="child"> <!-- Your code goes inside this div/form --> </div>
</div>
请注意，h-100 表示“高度：100%”，因此您应该使用一些 CSS 来解决它：
.parent {
min-height: 100vh;
}
并且，友情提醒一下，“父母”就像“身体”。如果主体不是 100vh，您将无法将其居中。换句话说，如果“body”是100vh，那么它的孩子应该是100%。如果你的结构更像是：
<body><div><div><div class="me"><form></form></div></div></div></body>
你的 body 应该是“min-height: 100vh; height: 100%”并且你所有的 div 应该是“height: 100%”。然后，您应该将 Flex 类添加到表单的父级（具有类“me”的父级）。希望对您有帮助。我鼓励你学习 CSS 盒子模型，它将帮助你理解一切。请避免使用“位置：绝对”技术。
在这里您可以了解有关盒模型的更多信息：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model