Html 如何在div中居中放置表元素？

请看一下这把小提琴：

这个问题和我昨天问的不一样。今天，我需要将innerTable放在div中，而不是td元素中

我正在尝试将“innertable”放在“tddiv”的中心。“tddiv”两侧的溢出应相等innertable“应水平居中，顶部垂直对齐。溢流也应在左右两侧居中相等。垂直方向的溢流应全部下降。理想情况下，实现这一点的css可以包含在“tddiv”和“innerTable”中

<table class="outerTable" align="center" border=1>
  <tr>
    <td valign=top>
      <div class="tddiv">
        <table class="innerTable" width=300px height=300px border=1 align=center>
        </table>
      </div>
    </td>
  </tr>
</table>

.outerTable {
  table-layout: fixed;
  /*   overflow: hidden; */
}

.innerTable {
  table-layout: fixed;
}

.tddiv {
  text-align: center;
  width: 200px;
  height: 200px;
}

---

您可以使用以下设置：

.innerTable {
  table-layout: fixed;
  background: #ddd;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

z-index和background不必是，我只是添加了它们以使可见结果更加明显

试着像这样使用flex .可外穿的{ 表布局：固定； 显示器：flex； 证明内容：中心； 溢出：隐藏； /*溢出：隐藏*/ } .innerTable{ 表布局：固定； } .tddiv{ 文本对齐：居中； 宽度：200px； 高度：200px； 显示器：flex； 证明内容：中心； }

---

你的内表比它所在的td大-是这样吗？是的，内表比td和div大。div限制了大小。我需要溢出在div中水平居中，垂直向下。你昨天问了这个问题并接受了一个答案，为什么还要再问？这不是同一个问题。这个问题的innerTable位于div中。昨天它位于td元素中。TD元素不能像div元素那样限制垂直高度。在任何元素内居中都是以相同的方式进行的，因此我仍然将其归类为重复项-从下面的答案和注释中可以看出，他们所做的事情与你昨天接受的答案中的人所做的几乎相同这与你昨天接受的答案完全相同？@Pete我不知道。准确地说，这是不完全相同的-在过去的答案左边空白：50%被用来代替位置：相对和左边：50%这不是同一个问题，参考我留下的评论，在其他地方，这是不同的。降级不公平。@Johannes我更关注的是将其向左移动50%，然后向后转换。对左边距和相对位置的左边距之间的差异吹毛求疵有点迂腐。无论如何-之前的评论是针对DVE3413昨天的解决方案在td内部不起作用。TD元素垂直增长，这就是为什么我必须把它放在一个div中，以方便地限制TD元素的高度。