如何实现div元素在任意屏幕尺寸下水平垂直居中显示？

margin: auto 在常规文档流中仅能实现块级元素的水平居中，无法处理垂直方向的居中逻辑——因为默认状态下块级元素高度由内容撑开，垂直方向没有可自动分配的剩余空间。要实现任意屏幕尺寸下#table元素固定在视口正中心，不需要改动现有HTML结构，以下两种方案都可以直接使用：

只需要补充调整CSS即可，修改后的完整CSS如下：

/* 清除浏览器默认边距，让根容器占满整个视口高度 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* 将body设为弹性容器，实现子元素双向居中 */
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#table {
  /* 原有margin: auto可删除，父容器已经实现居中逻辑 */
  width: 50%;
  padding: 10px;
  border: 2px solid black;
  overflow: auto;
  text-align: center;
}

#qrtr_details {
  margin: auto;
  width: 80%;
  padding: 5px;
  overflow: auto;
  text-align: center;
}

核心逻辑说明：

• min-height: 100vh 保证html、body高度始终和浏览器可视窗口高度一致，为垂直居中提供参照基准
• align-items: center 控制弹性容器内子元素垂直方向居中
• justify-content: center 控制弹性容器内子元素水平方向居中
• 该方案不受屏幕缩放、元素尺寸变化影响，适配所有现代浏览器。

如果你的页面后续要添加其他顶部、底部内容，不适合把body设为弹性容器，可以直接给目标div设置绝对定位：

/* 给父级设置定位参照基准 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
}

#table {
  position: absolute;
  /* 先把元素左上角定位到视口中心点 */
  top: 50%;
  left: 50%;
  /* 偏移自身宽高的一半，实现正中心对齐 */
  transform: translate(-50%, -50%);
  width: 50%;
  padding: 10px;
  border: 2px solid black;
  overflow: auto;
  text-align: center;
}

#qrtr_details {
  margin: auto;
  width: 80%;
  padding: 5px;
  overflow: auto;
  text-align: center;
}

两种方案最终效果完全一致，都能实现id为table的div固定在屏幕正中心，不受屏幕尺寸变化影响。

内容的提问来源于stack exchange，提问作者user19484673