I have the following simple test page and would like to center the content in the middle of the screen. I tested two methods (margin:auto & display:flex+justify-content+text-align+height). Both methods work.
What I don't understand is the behavior of height:100vh.
I need to set it on body and on the .site-content class and the page looks fine. My understanding is 100vh is always the same and not dependent from the parent. But it my example the height of body and the height of the content is different. Why?
<!DOCTYPE html>
<head>
<title>center content</title>
<meta charset="utf-8">
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.site-header {
text-align: center;
}
.site-nav {
background-color: black;
color: white;
text-align: center;
padding: 1em;
}
.site-content {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.site-footer {
background-color: black;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header class="site-header">
<h1>Basics</h1>
</header>
<nav class="site-nav">
Navigation
</nav>
<main class="site-content">
Content
</main>
<footer class="site-footer">
Footer
</footer>
</body>
</html>
