I am struggling to vertically align the main content in the center of the screen. While I was able to achieve vertical alignment within a div, the presence of a header on the page is causing difficulty in centering the main content vertically with respect to the entire screen. Any assistance on how to vertically center the main content when the header is present would be greatly appreciated.
You can view and edit the code at codeopen.io.
html {
height: 100%;
}
body {
background: #13385f;
height: 100%;
}
.nav-menu a {
color: rgba(255, 255, 255, .5);
text-decoration: none;
}
.nav-menu a.active {
color: white;
text-decoration: none;
}
.nav-menu a:hover {
color: white;
text-decoration: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="p-3 px-md-4">
<div class="d-flex flex-column flex-md-row align-items-center container justify-content-between">
<div class="my-0 ml-md-4 mr-md-auto">
<h5 class="my-0 font-weight-normal">
<b class="text-white">LOGO</b>
</h5>
</div>
<nav class="my-2 my-md-0 mr-md-4 nav-menu">
<a class="p-2 active" href="#">Sign in</a>
<a class="p-2" href="#">Register</a>
</nav>
</div>
</div>
</header>
<main role="main" class="h-100">
<div class="container d-flex h-100 align-items-center justify-content-center">
<div class="row text-white">
I'm trying to be centered vertically
</div>
</div>
</main>