如何在div中将表格元素居中？

Question

Please take a look at this fiddle:

(This question is not the same as the one I asked yesterday. Today, I need to center the innerTable within a div, not within a td element.)

https://jsfiddle.net/dve3413/rxdhcsvc/51/

I'm trying to get 'innertable' to be centered in 'tddiv'. The overflow should be equal on both sides of 'tddiv'. 'innertable' should be horizontally centered and vertical align on top. The overflow should also be centered (equal on left and right). The overflow vertically should all go down. Ideally, css to accomplish this can be contained within 'tddiv' and '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;
}

Answer 1

You can use these settings:

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

( z-index and background don't have to be, I just added them to make the visible result more obvious)

https://jsfiddle.net/afeetdjb/1/

Answer 2

Try using flex like this

 .outerTable { table-layout: fixed; display:flex; justify-content:center; overflow:hidden; /* overflow: hidden; */ } .innerTable { table-layout: fixed; } .tddiv { text-align: center; width: 200px; height: 200px; display: flex; justify-content:center; } 

 <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>