I'm struggling to center a card vertically between the search bar and the bottom of the viewport.
Even after setting the body height to 100%, the content extends beyond the viewport, leaving white space that users can scroll into. I've attempted using align-content: center; on the parent container, but it doesn't seem to make any difference.
html.html
<body>
<div class="navbar navbar-expand-lg sticky-top">
<!-- Navigation information -->
</div>
<div class="container-fluid">
<!-- Title above the search bar -->
<div class="row">
<div id="search-title" class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
<h3>Title</h3>
</div>
</div>
<!-- Search bar -->
<div class="row">
<div class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
<!-- Search form -->
</form>
</div>
</div>
<!-- No results message -->
<div class="row">
<div id="no-results" class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
{% if term != '' and not cameras %}
<!-- Display no results message -->
{% endif %}
</div>
</div>
<!-- Card resulting from the search -->
{% if camera %}
<div class="container align-center">
<!-- The goal is to vertically center this card between the search bar and the bottom of the viewport -->
<div class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto card myclass">
<div class="card-body">
<!-- Content details -->
</div>
</div>
</div>
{% endif %}
</div>
</body>
css
html, body {
height: 100%;
width: 100%;
}
.align-center {
align-content: center;
}
This is the current appearance. You can see that the border at the bottom surpasses the viewport.