使用 flexbox 将 body 设为全高弹性容器，并设置 justify-content 和 align-items 均为 center，即可实现子元素在视口内绝对居中；需注意重置默认 margin、设置 height: 100vh，并避免嵌套 flex 居中导致的偏差。

要让一个 <div> 在整个网页中精确水平且垂直居中（即相对于视口中心），最简洁可靠的现代方案是利用 CSS Flexbox。关键在于：将根容器（通常是 body）配置为一个具有完整视口高度的弹性上下文，并启用双向居中。

以下是推荐的完整实现：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

* {
  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 的最优解。