Position div vertically?

Question

hey guys i want to move the .mission-banner to the vertical centre of the .mission div. but margin: auto 0; wont work and also flex-box isnt. so what am i not seeing here ?

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
}

img {
 height: 50px;
 padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;
}

.mission-banner {
  background-color: black;
}

.mission-banner h4 {
  padding-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

.mission {
  background-image: url(../images/img-mission-background.jpg);
  position: relative;
  margin: 0 auto;
  top: 70px;
  width: 1200px;
  height: 700px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tea Cozy | Home</title>
    <link rel="stylesheet" href="./resources/css/style.css">
  </head>
  <body>
    <header>
      <img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
      <nav>
        <a href="#"><span>Mission</span></a>
        <a href="#"><span>Featured Tea</span></a>
        <a href="#"><span>Locations</span></a>
      </nav>
        </header>
  <!-- main-content -->
        <div class="mission">
          <div class="mission-banner">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>

  </body>
</html>

this is what it looks like rn:

Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Chase DeAnda, Mar 29 '18 at 18:11

score 0 · Answer 1 · answered Mar 29 '18 at 18:16

The issue is you have fixed height/width for the mission and relative positioning. You'll also need a fixed height set for the mission-banner to position it in the center of the page.

There is probably a more technical explanation for all this but playing around with quickly I was able to achieve what I believe you're looking for with the following css. You might need to fiddle a bit to get it exactly how you need, particularly the height of the mission banner when you add more content:

    .mission {
       background-image: url(../images/img-mission-background.jpg);
       position: absolute;
       top: 70px;
       width: 100%;
       height: 100%;
    }
    .mission-banner {
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      height: 200px;
      background-color: black;
    }

@jprince im a bit confused now. are you using absolute bc it positions relative to the parent container and `position: relative;` positions relative to the browserwindow? — itsolidude, Mar 29 '18 at 18:20

Taki · Answer 2 · 2018-03-29T18:56:09.503

margin:auto will center the div horizontally, use flex box

.mission{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

flex-direction lets you decide whether to align your content vertically with column or horizontally with row

https://www.w3schools.com/css/css3_flexbox.asp

i added background:red so it will be more clear that the div ( mission-banner ) is in the center vertically

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
}

img {
 height: 50px;
 padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;
}

.mission-banner {
  background-color: black;
  height: 180px;
}

.mission-banner h4 {
  padding-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

.mission {
  background-image: url(../images/img-mission-background.jpg);
  position: relative;
  margin: 0 auto;
  top: 70px;
  width: 100%;
  height: 400px;
  display: flex;
  background: red;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

   <header>
      <img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
      <nav>
        <a href="#"><span>Mission</span></a>
        <a href="#"><span>Featured Tea</span></a>
        <a href="#"><span>Locations</span></a>
      </nav>
        </header>
  <!-- main-content -->
        <div class="mission">
          <div class="mission-banner">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>

Position div vertically?

2 Answers2