You have to use d-flex for first point and flex-grow-1 to make the horizontally and vertically centered.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="flex flex-column vh-100">
<header class='fixed-top d-flex justify-content-around'>
<div class="d-flex align-items-center gap-5 justify-content-center">
<h3 class="float-md-start mb-0">Ethan Leyden</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
<a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
<a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
</nav>
</div>
</header>
<div class="mx-auto flex-grow-1 d-flex justify-content-center align-items-center h-100 mt-5">
<main class="">
<h1>Welcome to the site</h1>
<p class="lead">It's definitely still under construction. Do you know how to vertically center
content with Bootstrap? I sure don't</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
</p>
</main>
</div>
<div class="mx-auto my-auto">
</div></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>