[SOLVED] How do I adapt the <main> height to the page when I zoom in and out?

How do I adapt the <main> height to the page when I zoom in and out?

I am learning HTML and CSS and I am trying to replicate the homepage of flickr.com.

I can't get the central part of my page ("Find your inspiration") to stay centered when I zoom in and out. I can't get the <body> content to responsively fill the space between the <header> and the <footer>.

I have spent many hours googling, playing with heights, flex, and trying to reshape the layout of my page, but I can't figure out how to reproduce the desired effect. I think I am messing up the layout (especially with the nesting of my containers) but I can't spot my mistake.

Here are the screenshots of the real flickr.com home page and the screenshot of the clone page I'm trying to build. As you can see, my page doesn't keep the element centered when I zoom out because my block doesn't stretch to fill the space between <header> and <footer>:

My clone home page

Original Flickr home page

html {
  background: url(images/8225606733_086c8f3d83_o.jpg)no- repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
}

main {
  min-height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: block;
  text-align: center;
  background-color: lightblue;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0 30px;
}

.wrapper h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 18px;
}

.wrapper h2 {
  font-size: 25px;
  font-weight: normal;
  margin-bottom: 50px;
}

.wrapper a {
  color: black;
  font-weight: bold;
  background-color: white;
  padding: 12px 23px;
  border-radius: 3px;
}

footer {
  position: fixed;
  width: 100%;
  bottom: 0px;
}

<header>
  HEADER
</header>

<main>
  <div class="wrapper">
    <h1>Find your inspiration.</h1>
    <h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.
    </h2>

    <div class="start-button">
      <a href="#">Start for free</a>
    </div>
  </div>
</main>

<footer>
  FOOTER
</footer>

Solution

try this way:

main {
    height: calc(100vh - 70px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

You can't center the .wrapper element because you assigned a min-height: 400px to its parent element so it doesn't span for the entire viewport height. Try adding a colored background to the main element and you'll see.