使用 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 的直接子元素（如示例所示）：

  
    
      
BLACKJACK
      
Want to play a round?
      
Cards:
      
Sum:
      
        START GAME
        DRAW CARD
        NEW GAME
      
    
  

补充优化建议：

• .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 的最优解。