div 内table 居中实现代码

实现 div 内 table 居中可以采用以下两种方法：

方法一：使用 flex

HTML 代码：

<div class="container">
  <table>
    <tr>
      <td>示例</td>
      <td>示例</td>
      <td>示例</td>
    </tr>
  </table>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #000;
  padding: 10px;
}

以上代码中，首先给 .container 设置了 display: flex;，使用 flex 布局对其中的元素进行定位，将 justify-content 属性设置为 center，使其水平居中对齐；将 align-items 属性设置为 center，使其垂直居中对齐，其高度使用 100vh 进行设置，使其占满整个屏幕。

方法二：使用 position 和 transform

HTML 代码：

<div class="container">
  <table>
    <tr>
      <td>示例</td>
      <td>示例</td>
      <td>示例</td>
    </tr>
  </table>
</div>

CSS 代码：

.container {
  position: relative;
  height: 100vh;
}

table {
  border-collapse: collapse;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

td {
  border: 1px solid #000;
  padding: 10px;
}

以上代码中，首先给 .container 设置了 position: relative;，使得内部的 table 设置定位时参照 .container 进行，将其高度设置为 100vh，占满整个屏幕。

然后，在 table 中使用 position: absolute;，让其脱离文档流，与 .container 产生重叠。使用 top: 50%; 和 left: 50%;，分别将其上下、左右移动到 .container 的中心位置。最后使用 transform: translate(-50%, -50%);，将其向左上移动一半宽度、一半高度的距离，使其完美居中。

以上两种方法都可以有效实现 div 内 table 的居中操作。