仅用margin/padding实现body内div垂直居中（禁用flex/position）

问题原因 #

现有代码仅能实现水平居中的核心逻辑是：块级元素默认宽度占满父容器整行，水平方向存在可分配剩余空间，margin: auto会自动均分左右空间实现水平居中；但默认状态下html、body的高度由内部内容撑开，和目标div高度完全一致，垂直方向无多余空间可供分配，因此上下方向的margin: auto计算值为0，无法触发垂直居中。

可直接运行的实现代码 #

全程未使用flex、position、transform属性，完全符合挑战规则，仅补充了html、body的基础样式，原有div的样式无需改动：

html, body {
  /* 让html、body铺满整个视口高度，为垂直方向margin分配提供空间基础 */
  height: 100%;
  /* 清除浏览器默认给body添加的8px外边距，避免出现多余滚动条偏移居中位置 */
  margin: 0;
}

div {
  width: 200px;
  border: 4px solid black;
  padding: 50px;
  margin: auto;
}

HTML结构保持原有写法即可：

<body>
  <div></div>
</body>

原理说明 #

margin: auto的生效规则是：当元素为块级元素、父元素在对应方向有明确尺寸、且该方向存在剩余可用空间时，auto值会将剩余空间平均分配给该方向的两侧外边距。给html、body设置100%视口高度后，垂直方向就有了可计算的剩余空间，margin: auto会自动均分上下空间，实现垂直居中。
div上设置的padding: 50px为内部内边距，不影响居中逻辑，可根据视觉需求保留或删除。

内容的提问来源于stack exchange，提问作者Am.Shekari