search

Home  >  Q&A  >  body text

Center a div on a background image with 100vh height

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>

P粉006847750P粉006847750309 days ago410 
reply all(1)I'll reply
  • P粉953231781
    P粉9532317812024-02-18 00:39:29
     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: 
    

      

    1. They take up the entire width of the screen
      2. 

    2. They only take up the height required to display the content (their default height is auto). 
      3. 

    

    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: auto default attribute of the div can be overridden. If you set the height to 100%, 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 black to the div so you can see its size and position and then use a different height value like  unset, 100%, 50%, etc. Try it and try it! 
    reply
    0
  • Cancelreply