将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>