你添加的所有风格都很好。但是您忽略了容器样式的display: flex;。
align-items: center; justify-content: center;仅适用于display: flex;
div的默认display值为block。这就是你的解决方案失败的原因。
请找一把能用的小提琴。

<div style="display: flex; align-items: center; justify-content: center;">
  <table style="border: 1rem;">
    <tr>
      <th>Id</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>4</td>
      <td>2</td>
    </tr>
  </table>
</div>

使用flexbox。要使任何容器flex use显示：flex

<div style="display: flex; justify-content: center; align-items: center;">

 ... table
</div>

您可以使用“margin-left：auto;margin-right：auto;”但请注意，在您的情况下，它将在您拥有表格的div中居中，因此如果您希望它位于屏幕中心，则必须将其放大。
大概是这样的：

<div class="text-center" style="width:100%">
  <table style="border: 1rem;margin-left: auto;margin-right: auto;">
    <tr>
      <th>Id</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>4</td>
      <td>2</td>
    </tr>
  </table>
</div>

试试这个.

<div>
 <table style="border: 1px solid orange; margin-left: auto; margin-right: auto;">
  <tr><th>Id</th><th>Quantity</th></tr>
  <tr><td>1</td><td>2</td></tr>
  <tr><td>3</td><td>4</td></tr>
  <tr><td>4</td><td>2</td></tr>
 </table>
</div>

<table align="center">
    <tr><th>Id</th><th>Quantity</th></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>4</td><td>2</td></tr>
</table>