使用 flexbox 将 body 设为全高弹性容器，并设置 justify-content 和 align-items 均为 center，即可实现子元素在视口内绝对居中；需注意重置默认 margin、设置 height: 100vh，并避免嵌套 flex 居中导致的偏差。
要让一个
在整个网页中精确水平且垂直居中（即相对于视口中心），最简洁可靠的现代方案是利用 CSS Flexbox。关键在于：将根容器（通常是 body）配置为一个具有完整视口高度的弹性上下文，并启用双向居中。
以下是推荐的完整实现：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 占满整个视口高度 */
margin: 0; /* 清除浏览器默认 body 外边距 */
}对应 HTML 结构保持不变，但需确保 .box 是 body 的直接子元素（如示例所示）：
<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>
</body>补充优化建议：
- .box 中 width: max-content（而非 50vh）更利于内容自适应，配合 padding 提升可读性；
- 移除 .box 自身的 display: flex（除非内部有复杂布局需求），避免冗余嵌套 flex 容器干扰居中逻辑；
- 若页面存在滚动或动态内容，该方案仍能稳定工作——因为 100vh 基于当前视口，且 flex 居中不依赖绝对定位或 JS 计算。
✅ 总结：
核心三要素 = display: flex + justify-content: center + align-items: center + height: 100vh + margin: 0。
这是目前兼容性好（支持所有现代浏览器及 IE11）、语义清晰、无需 JavaScript 的最优解。
