Javascript 有没有办法在这个代码笔中居中放置我的表格/图像？

所以我最近开始学习如何编码。我决定制作一个包含所有粉碎角色伤害值的网站。到目前为止，我最大的挫折是我无法找到一种方法来集中我所有大小不同的桌子和图片

到目前为止，我已经尝试将我所有的表格放入div中，并使用自动边距在左右两侧居中。此外，我还尝试用flexbox将我的桌子放在中间，但似乎没有任何效果。在我看来，我剩下的唯一选择是手动将它们全部居中，但这似乎需要很长时间，我相信有一个不同的解决方案

下面是我的表当前的配置方式

#damagetablemario {
   display:none;
   position:absolute;
   top:700px;
   left:80px;
   border-collapse:collapse;
}
#damagetablemario2 {
   display:none;
   position:relative;
   top:400px;
   left:110px;
   border-collapse:collapse;
}
#damagetablemario3 {
   display:none;
   position:relative;
   top:450px;
   left:540px;
   border-collapse:collapse;
   margin-bottom:200px;
}

下面是我的表格是如何用html编写的

<table id = "damagetablemario">
   <tr>
      <th>Neutral</th>
      <th>Forward  Tilt</th>
      <th>Up Tilt</th>
      <th>Down-Tilt</th>
      <th>Forward-Smash</th>
      <th>Up-Smash</th>
      <th>Down-Smash</th>
      <th>Neutral-Air</th>
      <th>Forward-Air</th>
      <th>Back-Air</th>
      <th>Up-Air</th>
      <th>Down-Air</th> 
   </tr>
   <tr>
      <td class = "Neutral">2.2% (punch)<br>1.7% (punch)<br> 4% (kick)</td>
      <td class = "Forward-Tilt">7%</td>
      <td class = "Up-Tilt">5.5%</td>
      <td class = "Down-Tilt">5% (foot) <br> 7% (body)</td>
      <td class = "Forward-Smash">17.8% (fire)<br> 14.7% (arm)</td>
      <td class = "Up-Smash">14%</td>
      <td class = "Down-Smash">10% (front)<br> 12% (back)</td>
      <td class = "Neutral-Air">8% (clean)<br> 5% (late)</td>
      <td class = "Forward-Air">12% (early)<br> 14% (clean)<br> 10%(late)</td>
      <td class = "Back-Air">10.5% (clean)<br> 7% (late)</td>
      <td class = "Up-Air">7%</td>
      <td class = "Down-Air">1.4% (1-5 hits) <br>
         5.5% (hit  6) <br>
         2% (landing)
      </td>
   </tr>
</table>
<table id = "damagetablemario2">
   <tr>
      <th>Grab</th>
      <th>Pummel</th>
      <th>Forward Throw</th>
      <th>Back Throw</th>
      <th>Up Throw</th>
      <th>Down Throw</th>
      <th>Neutral Special</th>
      <th>Side Special</th>
      <th>Up Special</th>
      <th>Down Special</th>
      <th>Final Smash</th> 
   </tr>
   <tr>
      <td>0%</td>
      <td>1.3%</td>
      <td>8%</td>
      <td>11% (throw)<br>8% (collateral)</td>
      <td>7%</td>
      <td>5%</td>
      <td>5% (early)<br>4% (late)</td>
      <td>7% 1.5x <br> projectile reflect</td>
      <td>5% (hit 1)<br> 0.6% (hits 2-6)<br>3% (hit 7)</td>
      <td>0%</td>
      <td>2% (early)<br>2.5% (clean)<br>3% (late)</td>
   </tr>
</table>
<table id = "damagetablemario3">
   <tr>
      <th>Floor Attack Front</th>
      <th>Floor Attack Back</th>
      <th>Floor Attack Trip</th>
      <th>Edge Attack</th>
   </tr>
   <tr>
      <td >7%</td>
      <td >7%</td>
      <td >5%</td>
      <td >9%</td>
   </tr>
</table>

中立的
前倾
向上倾斜
下倾
向前扣杀
扣杀
向下扣杀
中性空气
前空袭
回风
空中
空降
2.2%（打孔）
1.7%（打孔）
4%（打孔）
7%
5.5%
5%（脚）
7%（身体）
17.8%（火灾）
14.7%（手臂）
14%
10%（正面）
12%（背面）
8%（清洁）
5%（迟交）
12%（早期）
14%（清洁）
10%（晚期）
10.5%（清洁）
7%（后期）
7%
1.4%（1-5次点击）

5.5%（命中率6）

2%（着陆）
抓住
捶打
前抛
后投
抛球
下掷
中性特殊
副业
特价
羽绒服
最后一击
0%
1.3%
8%
11%（抛掷）
8%（抵押品）
7%
5%
5%（早期）
4%（晚期）
7%1.5x
弹丸反射
5%（命中1）
0.6%（命中2-6）
3%（命中7）
0%
2%（早期）
2.5%（清洁）
3%（晚期）
地面攻击前沿
地面反击
地板攻击行程
边缘攻击
7%
7%
5%
9%

我的最终目标是让我的表集中在屏幕的中间，不管它们有多少文本。

---

将

left

属性替换为

0

，并将此CSS属性添加到

表中

table {
    display: flex;
    justify-content: center;
}

---

您也可以尝试

transform:translateX（-50%）
我看到css中的大多数样式都是使用ID（
）完成的。因此，同一组样式会重复多次，从而使CSS文件更大。更好的方法是使用所有常用样式创建一个类，并在HTML中多次使用类名。这样修改样式/维护将非常简单。这正是您现在面临的问题：）

因此，一种方法是使用
grid
。通过这样做，就没有必要为您的表留下空白。所以

删除所有
左侧：
所有表格上的样式
删除
显示：无在所有表上

如果
位置：绝对位置使用<代码>宽度：100%

CSS:

不使用显示：块；给你的桌子。使用显示：表格；删除左侧并设置边距：自动
 为此，您希望删除左侧css
table {
   display: grid;
   justify-items: center;
}
#damagetablemario {
   /* display:none; */ /* remove */
   position:absolute;
   width: 100%; /*Add */
   top:700px;
   /* left:80px; */ /* remove */
   border-collapse:collapse;
}
#damagetablemario2 {
   /* display:none; */ /* remove */
   position:relative;
   top:400px;
   /* left:110px; */ /* remove */
   border-collapse:collapse;
}
#damagetablemario3 {
   /* display:none; */ /* remove */
   position:relative;
   top:450px;
   /* left:540px; */ /* remove */
   border-collapse:collapse;
   margin-bottom:200px;
}