Javascript 以html格式划分节

我已经将我的html页面划分为3个部分，指定高度如下所示。现在我想把我的下一段代码放在上面部分的下面，也放在网页的中间。但我无法获得预期的数据

html，
身体{
身高：100%；
保证金：0；
}
div{
身高：30%；
背景色：白色；
浮动：左；
}
#左{
宽度：500px；
保证金：5px；
}
#居中{
宽度：500px；
保证金：5px；
}
#对{
宽度：500px；
保证金：5px；
}
#桌子{
位置：绝对位置；
保证金：自动；
右：0；
底部：0；
左：0；
宽度：100px；
高度：100px；
最高：100%；
}

ID

类型
与电有关的
机械的






名称：

节：

V.Inv.No

V.Inv.Date


IRno:

识别





中国
项目名称
项目代码
供应商
收到数量
接受数量
拒收数量
评论

尝试更改css代码，如下所示：

#tablediv {
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0;
  left: 50%;
  height: 100px;
  transform:translateX(-50%);
}

它将保持桌面在顶部内容和页面之间的中间。

html，
身体{
身高：100%；
保证金：0；
}
div{
身高：30%；
背景色：白色；
浮动：左；
}
#左{
宽度：500px；
保证金：5px；
}
#居中{
宽度：500px；
保证金：5px；
}
#对{
宽度：500px；
保证金：5px；
}
@介质（最小宽度：786px）{
#桌子{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
}

ID

类型
与电有关的
机械的






名称：

节：

V.Inv.No

V.Inv.Date


IRno:

识别





中国
项目名称
项目代码
供应商
收到数量
接受数量
拒收数量
评论

你能分享一些你希望网页看起来如何的图片吗？抱歉，但我似乎不明白，“网页中间”中的“中间”是什么意思？使用媒体查询进行更新，以便在较低的屏幕上它不是绝对值。当我尝试填充tablediv表中的一些值时，该分区将位于右角。请帮我做这个。添加了一个图像：你是否单独更改了此部分转换：translate（-50%，-50%）？我还是一样。实际上，当点击上面的按钮时，这些将被动态加载。所以在那个时候，根据它的大小，它会向右移动。如果长度超过正确的页数顶部：50%；左：50%；转换：翻译（-50%，-50%）；而且它在铬和莫兹拉中表现出不同的行为。请帮我解决这个问题谢谢。但是这个div会显示在屏幕的底部

#tablediv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}