仅对 body 设置 display: flex; justify-content: center; align-items: center 无法实现垂直居中，根本原因是 body 默认高度未占满视口；需显式设置 height: 100vh（或同步设置 html { height: 100% }），才能让 Flex 居中生效。
仅对 `body` 设置 `display: flex; justify-content: center; align-items: center` 无法实现垂直居中，根本原因是 `body` 默认高度未占满视口；需显式设置 `height: 100vh`（或同步设置 `html { height: 100% }`），才能让 flex 居中生效。
在使用 Flexbox 进行全局居中时，一个高频误区是：误以为只要给容器设了 display: flex + 双 center，就能自动撑满整个视口并居中内容。实际上，Flex 的 align-items: center 是沿交叉轴（此处为垂直方向）居中，但它依赖容器自身具备明确的高度——而
元素默认高度由其子内容决定，并非天然等于视口高度。? 为什么 body { height: 100% } 不够？
CSS 中百分比高度（如 height: 100%）是相对于父容器计算的。body 的父元素是 ，若未显式设置 html { height: 100% }，则 html 的高度由内容撑开（通常远小于视口），导致 body { height: 100% } 实际计算结果接近 0px。此时即使启用 Flex，交叉轴（垂直方向）无可居中空间，align-items: center 自然失效。
✅ 正确解法有两种（推荐第一种）：
✅ 方案一：使用 vh 单位（简洁可靠）
body {
margin: 0; /* 移除默认外边距，避免滚动条或偏移 */
background-color: #dbdbdb;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 关键：直接占满视口高度 */
}✅ 方案二：级联设置 html 和 body 高度（语义更清晰）
html {
height: 100%; /* 使 html 高度 = 视口高度 */
}
body {
margin: 0;
background-color: #dbdbdb;
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* 此时 100% 相对于 html 的 100vh */
}? 补充说明：100vh 表示“视口高度的 100%”，不依赖父元素，语义明确、兼容性好（现代浏览器均支持），是页面级居中最推荐的方式。
? 配合你的 HTML 结构优化建议
你当前的结构已合理使用嵌套 Flex（.container 和 .top），但注意：若只对 body 居中，内部容器无需重复设置 justify-content/align-items，除非有局部居中需求。精简后的 CSS 示例：
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-color: #dbdbdb;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 主容器撑满视口 */
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.top {
display: flex;
align-items: center;
gap: 50px;
}
.arrows {
height: 70px;
}⚠️ 注意事项总结
- 始终重置 margin: 0： 默认有 8px 外边距，会导致视觉偏移；
- 避免过度嵌套 Flex 居中：若 body 已居中，.container 的 align-items/justify-content 仅影响其子元素布局，非必需；
- 慎用 min-height: 100vh：当内容超长时，min-height 可防止高度截断，但若目标是严格“视口内居中”，height: 100vh 更准确；
- 响应式考虑：在移动端，vh 单位可能受地址栏缩放影响（Safari iOS），如需极致兼容，可结合 dvh（dynamic viewport height）作为渐进增强。
掌握这一原理后，你将彻底避开 Flex 居中的“垂直失效”陷阱——它不是 Flex 本身的问题，而是 CSS 高度继承机制与视口单位的协同逻辑。下一步，可尝试用 place-items: center（Grid）或 position: absolute + transform 对比实现，加深对布局模型的理解。
