本文详解使用 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 上下文链路完整：

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

⚠️ 注意事项：

• 不要给 .box 设置 height: 100vh 或固定高度（除非有特殊需求），否则可能遮挡内容或破坏自适应；
• 若页面需滚动，而你仍希望 .box 始终视口居中（非文档流居中），应改用 position: fixed + transform: translate(-50%, -50%) 方案；
• width: max-content 比 50vh 更安全，避免小屏设备下内容换行异常；如需约束最大宽度，可叠加 max-width: 90vw。

该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥12），简洁、可靠、语义清晰，是目前实现块级元素视口居中的推荐实践。