将 HTML 元素移动到页面中间[重复]

Question

一直在尝试解决这个问题，但没有成功。 我想知道如何在屏幕底部没有长导航栏的情况下将内容居中放置在页面中间。

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>

我是新来的，希望没事我有问题要问，我渴望学习并变得更好。

提前致谢

Answer 1

我使用 flexbox 功能更改和调整了您的代码

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>