使用height:100%导致元素移出屏幕的SPA居中布局问题

嘿，这个问题我之前做SPA的时候也碰到过！核心矛盾就是：用height:100%能让内容居中，但内容一长就会把顶部挤出视口；去掉这个属性虽然内容能完整显示，可居中效果又没了。下面给你两个实用的解决方案：

方案一：用min-height: 100vh替换height:100% #

这是最直接的修复思路，既能保证内容在视口内居中，又能在内容过长时自动扩展容器高度：

html, .leofullscreen {
  width: 100%;
  /* 把height:100%换成min-height:100vh */
  min-height: 100vh;
  bottom: 0px;
  top: 0px;
  left: 0;
  position: absolute;
}

.container {
  /* 同样替换height:100%为min-height:100vh */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 加上这个，内容溢出时容器会出现滚动条 */
  overflow-y: auto;
}

为什么这招管用？ #

• 100vh是视口高度的100%，比height:100%更稳定，不会受父元素高度的连锁影响
• min-height确保容器在内容不足时占满视口，内容过长时自动拉伸高度
• overflow-y: auto保证溢出的内容能通过滚动查看，不会被截断

方案二：用margin:auto实现自适应居中（适合简单布局） #

如果你的布局结构不复杂，也可以去掉align-items: center，靠margin让卡片自己居中：

.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.card {
  /* 让卡片在垂直方向自动居中 */
  margin: auto 0;
}

这种方式的好处是，当卡片高度超过视口时，容器会自动撑开，卡片不会被截断；内容较短时，依然能稳稳保持在视口中央。

小提示 #

别忘了给body设置margin:0，避免浏览器默认边距导致布局出现不必要的滚动条或偏移哦～

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