Как центрировать элемент таблицы внутри div?

Question

Пожалуйста, взгляните на эту скрипку:

(Этот вопрос не тот, который я задавал вчера. Сегодня мне нужно центрировать внутреннюю таблицу внутри элемента div, а не внутри элемента td.)

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

Я пытаюсь сделать так, чтобы «внутренняя таблица» была сосредоточена в «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;
}

Answer 1

Попробуйте использовать flex, как это

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

Answer 2

Вы можете использовать эти настройки:

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

(z-index и background необязательно, я просто добавил их, чтобы сделать видимый результат более очевидным)

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