Align main content vertically center of screen when header is available - html

Question

I am trying to align main content vertically center of screen. I did vertically center of div. But I was not able to do center of screen due to header. I want to do main content vertically center of screen when header is there. Any help would be appreciated.
I have built it at codeopen.io so you guys can play with it.
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">
<!-- <img src="assets/images/logo.png" class="img-reponsive" width="50" /> -->
<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 vertically centered
</div>
</div>
</main>

Answer 1

<header>
<div class="p-3 px-md-4">
<div class="d-flex flex-column flex-md-row align-items-center container justify-content-between fixed-header">
<div class="my-0 ml-md-4 mr-md-auto">
<h5 class="my-0 font-weight-normal">
<!-- <img src="assets/images/logo.png" class="img-reponsive" width="50" /> -->
<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>
I think you want your header to be fixed on top if that is your problem add fixed-top class to the second div of your header to make your header fixed top. check the second div in the above code.