如何通过CSS实现外层div包裹的HTML表格屏幕居中

不需要移除外层div，普通无特殊定位的块级div不会阻断内部元素的margin: auto居中规则，你遇到的居中失效、表格缩小问题由两个代码错误导致：

• HTML结构错误：包裹表格的div结束标签误写为开标签<div>，浏览器DOM解析异常，导致布局规则失效

• 宽度设置不合理：表格设置的固定宽度width: 500px远小于内容实际所需宽度，之前观察到的「设置margin: 2px auto后表格缩小」是固定宽度挤压内容导致的，和margin属性本身无关

方案1：修正现有代码，通过table自身margin居中 #

1. 修复HTML闭合错误，将代码最后一行的错误开标签替换为正确的闭合标签：

</table>
</div>

2. 调整表格宽度适配内容：表格所有单元格colspan总和为17，500px无法容纳三列长文本，将table的width调整为适配内容的尺寸（参考值900px）即可。如果必须保留500px固定宽度，给table添加两个属性让内容自动换行，避免溢出：

table {
  border: 1px solid white;
  margin: 2px auto; /* 该写法本身不会导致表格缩小，可直接替换左右margin分写形式 */
  border-collapse: collapse;
  width: 900px; /* 若保留500px固定宽度，打开下面两行注释 */
  /* table-layout: fixed;
  word-break: break-word; */
  text-align: center;
  font-size: 20px;
}

修正后表格会自动在页面水平居中，无需删除外层div。

方案2：通过外层div实现居中，扩展性更强 #

如果后续需要给外层容器添加背景、内边距等样式，可以直接在外层div上设置flex布局实现居中，不依赖table的margin规则：

1. 给外层div添加类名方便定位：

<div class="table-wrap">
  <table>
    <!-- 原有表格内容保持不变 -->
  </table>
</div>

2. 添加对应样式：

.table-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

该方案下无论表格宽度设置为多少，都会自动在页面水平居中，不会出现布局偏移。

补充说明：border-collapse: collapse是用于合并表格边框的常规属性，和居中规则无冲突，不需要移除。

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