Move HTML elements to the middle of the page

Question

Been trying to solve this for a while now without success. I would like to know how I can center stuff in the middle of the page without having a long navigation bar at the bottom of your screen.

https://codepen.io/picklemyrickle/pen/XWjzyvb

#h2 {
  position: absolute;
  width: 100%;
  left: 40%;
  margin-top: 60px;
}

#form {
  position: absolute;
  top: 50px;
  left: 10px;

}

#benefits {
  position: absolute;
  left: 40%;
  margin-top: 160px;
}

<section id="h2">
  <h2>Daniel's Get lean plan</h2>

  <form id="form"
  action="https://www.freecodecamp.com/email-submit">
    <input type="email"
         id="email"
 placeholder="Enter your email here"
       name="email"> 
    <input type="submit"
         id="submit">
  </form>
</section>

I'm new here hope it's fine I have questions to ask, I am eager to learn and become better.

Thanks in advance

Check out https://css-tricks.com/centering-css-complete-guide/ — Dominik, May 23 '21 at 21:31

score 0 · Answer 1 · answered May 23 '21 at 21:35

I changed and adapted your code with flexbox features

body {
     display:flex;
     flex-flow: column;
     width:100%;
     height: 100vh;
     align-items: center;
     justify-content: center;
}
#h2 {
  display: flex;
  flex-flow: column;
  justify-content:center;
  align-items: center;
  width: 100%;   
  height: 100%;
}

<section id="h2">
    <h2>Daniel's Get lean plan</h2>
    
  <form id="form"
    action="https://www.freecodecamp.com/email-submit">
   <input type="email"
           id="email"
   placeholder="Enter your email here"
         name="email"> 
   <input type="submit"
           id="submit">
  
    </form>
  </section>

Move HTML elements to the middle of the page

1 Answers1