如何将HTML元素居中放置在页面中间且避免底部出现长导航条

问题根因 #

你当前代码大量使用position: absolute绝对定位，该属性会让元素脱离正常文档流，不仅很难实现全局居中适配，还会因为元素位置不受正常布局约束，异常撑高页面高度导致底部导航条变形。

修复方案 #

推荐使用现在主流的Flex布局实现居中，适配性高、写法简单，修正后的代码如下：

CSS代码

/* 先全局重置浏览器默认边距，避免不同浏览器显示差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 给根容器设置flex属性实现全局居中 */
body {
  min-height: 100vh; /* 强制占满整个屏幕可视高度 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中所有内容 */
  padding-top: 60px; /* 保留你需要的顶部间距 */
}

/* 移除所有绝对定位属性，回归正常文档流 */
#h2 {
  text-align: center;
}

#form {
  display: flex;
  gap: 10px; /* 输入框和提交按钮之间加间距 */
  margin-top: 18px;
}

#benefits {
  margin-top: 40px; /* 调整原来的过大边距，避免撑高页面导致导航条异常 */
}

HTML代码

你的原有HTML结构不需要修改，直接替换CSS部分即可生效。
如果需要同时实现垂直居中，只需要在body的CSS属性里额外加一行justify-content: center即可。

新手注意事项 #

日常页面布局尽量不要用绝对定位做全局布局，绝对定位更适合实现悬浮标签、弹窗这类小范围的特殊定位需求，常规布局用Flex/Grid就能满足绝大多数需求，适配不同屏幕尺寸的效果也更好。

内容的提问来源于stack exchange，提问作者TheOctagon3322