I'm working on a course that has a fixed position navigation bar at the top. The background is set to a height of 100vh and the div with the text content is in the center of the background. Using Flexbox it's almost centered, but in order to really get it to the center of the background, the height of the div has to be set to 100% of the height. I know something about Flexbox and viewport height, but I'm confused as to why I need to set the div's height to 100% to truly center the dive. I think you can put any image as a background here to replicate what I'm asking for. Hope I'm making sense here.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: #fff;
color: #333;
line-height: 1.5;
}
ul {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
h1,
h2 {
font-weight: 300px;
line-height: 1.5:
}
p {
margin: 10px 0;
}
img {
width: 100%;
/*makes image width of the container */
}
/* navbar */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
width: 100%;
height: 70px;
/* apparently a common height for navbar */
position: fixed;
top: 0px;
padding: 0 30px;
}
.navbar a {
color: #fff;
padding: 10px 20px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: 1px solid #28a745;
}
.navbar ul {
display: flex;
}
/* Header */
.hero {
background: url("/img/home/showcase.jpg") no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to EdgeLedger</title>
<link rel="stylesheet" href="/css/utilities.css">
<!-- style.css is last in case utilities.css needs to be overwritten -->
<link rel="stylesheet" href="/css/style.css">
<script src="https://kit.fontawesome.com/6eab1538de.js" crossorigin="anonymous"></script>
</head>
<body id="home">
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
<span class="text-primary"><i class="fas fa-book-open"></i>Edge</span>Ledger
</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#cases">Cases</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<h1>The sky is the limit</h1>
<p>We provide world class financial assistance</p>
<a href="#about" class="btn">Read More</a>
</div>
</header>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If I understand correctly, you are saying that the content is centered horizontally by default, but the div requires
height: 100%to center the content vertically.Div is a block element, which means by default:
auto).If your div is content-centered Flexbox, even if the content is vertically centered, the div will only expand downwards as needed to fit the tallest element within it. Since the div is still at the top of the screen, even if its content is vertically centered within the div, the content will appear at the top of the screen, because the div is only as tall as the content, and because the div is at the top of the screen.
However, the
height: autodefault attribute of the div can be overridden. If you set the height to100%, it will force the div to be 100% of the height of its parent element (the page). The div will then give the content a bunch of extra space, and thanks to Flex rules, it will position the content in the vertical center of that extra space.To take this a step further you can try adding
border: 5px dashed blackto the div so you can see its size and position and then use a different height value likeunset,100%,50%, etc. Try it and try it!