Using Bootstrap 4, I have been trying to center the container content on my screen. Despite setting the height to 100% and using justify-content-center align-items-center, the content remains stuck at the top of the page.
Image:
https://i.sstatic.net/RZIk7.jpg
<!doctype html>
<html lang="en" class="h-100">
<head>
...
</head>
<body class="h-100">
<header>
...
</header>
<main class="h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center">
<div class="col">
<!-- Title -->
<div class="row text-center">
<div id="title" class="w-100 mt-5">
<h1>Let's Find You a Great Apartment.</h1>
</div>
</div>
<!-- Subtitle -->
<div class="row text-center">
<div id="subtitle" class="w-100">
<h2><small>Join more than 5,828,476 happy renters searching 1,025,792 local apartments.</small></h2>
</div>
</div>
<!-- Search box -->
<div class="row w-100 align-items-center">
<div id="search" class="enterALocationSearchBox mt-2">
<input type="text" class="w-100" placeholder="Enter a Location here">
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" />
</body>
</html>