本文详解使用 flexbox 实现 div 在整个视口内精确水平垂直居中的标准方法，重点解决因 body 高度缺失或 flex 属性不完整导致的居中失效问题，并提供可直接运行的 css 与 html 示例。
要让一个
在整个网页（即浏览器视口）中真正居中——既水平居中、又垂直居中——关键在于：父容器（通常是 body）必须具备明确的高度上下文，且需同时启用 justify-content: center 和 align-items: center。
你原代码中仅对 body 设置了 display: flex 和 justify-content: center，但缺少两个核心要素：
- align-items: center（控制垂直居中）；
- height: 100vh（确保 body 占满整个视口高度；否则其高度由内容决定，flex 垂直居中将无效）。
此外，建议重置默认 margin: 0，避免浏览器默认样式干扰布局。
✅ 正确做法如下：
body {
margin: 0; /* 清除默认外边距 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 —— 关键！ */
height: 100vh; /* 占满整个视口高度 —— 关键！ */
}
.box {
display: flex;
justify-content: center;
align-items: center;
border: 5px solid black;
padding: 1em 2em;
width: max-content; /* 自适应宽度，避免固定宽高导致溢出或变形 */
/* height: auto; 已是默认值，可省略 */
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.buttons {
display: flex;
padding: 10px;
margin-top: 10px;
}对应 HTML 结构保持不变，但请确保 .box 直接位于
下（如示例所示），以保证 flex 上下文链路完整：<body>
<div class="box">
<div class="content">
<h1 class="header">BLACKJACK</h1>
<p id="message-el" class="message">Want to play a round?</p>
<p id="cards-el" class="cards">Cards:</p>
<p id="sum-el" class="sum">Sum:</p>
<div class="buttons">
<button id="button-start-el" class="button-start">START GAME</button>
<button id="button-draw-el" class="button-draw">DRAW CARD</button>
<button id="button-new-el" class="button-new">NEW GAME</button>
</div>
</div>
</div>
<script src="/js/javascript.js"></script>
</body>⚠️ 注意事项：
- 不要给 .box 设置 height: 100vh 或固定高度（除非有特殊需求），否则可能遮挡内容或破坏自适应；
- 若页面需滚动，而你仍希望 .box 始终视口居中（非文档流居中），应改用 position: fixed + transform: translate(-50%, -50%) 方案；
- width: max-content 比 50vh 更安全，避免小屏设备下内容换行异常；如需约束最大宽度，可叠加 max-width: 90vw。
该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥12），简洁、可靠、语义清晰，是目前实现块级元素视口居中的推荐实践。
