使用 flexbox 实现元素在视口内水平垂直完全居中，关键在于为 body 设置 100vh 高度并同时启用 justify-content 和 align-items 居中。
要让一个
精确位于整个网页（即视口）的正中心，仅靠 justify-content: center 是不够的——它只能实现水平居中；若缺少 align-items: center 且容器本身没有明确高度，垂直居中将失效。
核心问题在于：默认情况下
的高度由内容决定，而非填满整个视口。因此，即使设置了 display: flex 和 justify-content: center，body 的实际高度可能远小于视口，导致子元素无法垂直居中。✅ 正确做法如下：
- 重置默认边距：移除 默认 margin，避免偏移；
- 强制占满视口：设置 height: 100vh，使 body 高度等于浏览器窗口高度；
- 启用双轴居中：同时设置 justify-content: center（主轴居中 → 水平）和 align-items: center（交叉轴居中 → 垂直）；
- 优化子容器：.box 可改用 width: max-content 配合 padding，避免 50vh 宽度在小屏下溢出，提升响应性。
以下是完整、可直接使用的 CSS 示例：
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 关键：撑满视口高度 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.box {
display: flex;
justify-content: center;
align-items: center;
border: 5px solid #000;
padding: 1.5rem 2rem;
width: max-content; /* 更自然的宽度适配内容 */
background-color: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.buttons {
display: flex;
gap: 0.75rem;
padding: 10px;
margin-top: 1rem;
}
button {
padding: 0.6rem 1.2rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}⚠️ 注意事项：
- 不要遗漏 margin: 0 —— 浏览器默认 body margin 会导致整体偏移；
- height: 100vh 是相对视口高度，若页面有滚动条或需兼容移动端 Safari，可考虑 min-height: 100vh 作为更稳健替代；
- 若 .box 内部内容动态变化（如 JS 更新文本），该居中方案仍保持稳定，无需额外 JS 计算；
- 如需支持旧版浏览器（IE10/11），可补充 display: -ms-flexbox 等前缀，但现代项目推荐优先使用标准 Flexbox。
总结：真正的“页面正中央” = 视口级容器 + 双轴 Flex 居中 + 显式高度控制。掌握这一组合，即可零 JS、纯 CSS 实现任意块级元素的精准居中。
