如何在div中居中table元素？附JSFiddle示例及具体布局需求

我看了你的需求，要让innerTable在tddiv里水平居中、顶部对齐，同时左右溢出部分相等，其实用Flex布局就能轻松实现，步骤超简单：

方案一：Flex布局（推荐） #

修改.tddiv的CSS样式，添加Flex相关属性：

.tddiv {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: auto;
  /* 新增这三行实现目标效果 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.innerTable {
  width: 500px;
  border: 1px solid red;
}

原理说明： #

• display: flex：把tddiv转换成Flex容器，方便灵活控制子元素的对齐方式
• justify-content: center：让innerTable在水平方向上居中，这样当innerTable宽度超过tddiv时，左右两边的溢出量会完全相等
• align-items: flex-start：强制innerTable在垂直方向上靠顶部对齐，完美匹配你的需求
• 保留overflow: auto：确保内容超出容器时自动出现滚动条，垂直方向的溢出也能正常滚动查看

方案二：传统margin对齐法 #

如果你不想用Flex布局，也可以用传统的margin实现：

.tddiv {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: auto;
  text-align: center; /* 辅助兼容部分场景 */
}

.innerTable {
  width: 500px;
  border: 1px solid red;
  margin: 0 auto; /* 水平居中核心属性 */
}

这个方案通过margin: 0 auto让块级的innerTable在父容器中水平居中，text-align: center是为了兼容一些特殊场景，现代浏览器里其实单独用margin: 0 auto就足够生效了。

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