I'm currently using Bootstrap 5 and facing an issue with getting text centered vertically on the page. I attempted to make the container of the div take up 100% of the page by using h-100, but it resulted in overflow due to the navbar occupying some space. My goal is to have the div containing the text occupy the remaining vertical height or find another way to center the text without relying on 100% height.
It's worth noting that I haven't applied any custom user-defined CSS except for a few color and font tweaks.
https://i.sstatic.net/eqzSw.png
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/overrides.css" rel="stylesheet">
<link href="./css/colors.css" rel="stylesheet">
<link rel="icon" href="./images/favicon.png">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130f130d">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="h-100" style="background:url('./images/test_bg.jpeg'); background-repeat: no-repeat; background-size:fit;">
<nav class="navbar navbar-expand-lg sticky-top mt-auto">
<div class="mx-auto text-center">
<a class="navbar-brand" href="#"><img src="./images/logo_desktop.png" width="200"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="h-100 container-fluid my-auto d-flex align-items-center justify-content-center classes">
<div class="row text-light">
<div class="col-md-12 col-sm-12 text-center">
<h1 class="display-1">IF YOU CAN THINK IT,<br />WE CAN MAKE IT.</h1>
</div>
</div>
</div>
</body>
</html>