Javascript 居中溢出：DIV内的自动内容

我正在尝试在DIV视口中创建一个网格，并将溢出设置为“自动”，并希望向其添加缩放功能。用户应该能够放大/缩小，但我希望在整个缩放过程中保持资源中心对齐

当缩放时，横轴上溢出的内容居中，当向左和向右滚动时，我可以看到该轴上的所有8个网格框-这是完美的。然而，出于某种奇怪的原因，Y轴上溢出的内容在缩放时没有居中，栅格的最上面部分从视口中消失，令人烦恼的是无法看到或滚动到

放大时，请注意水平滚动条如何保持居中，您可以左右滚动并查看所有8个框，但垂直轴的工作方式不同

我欢迎您的建议和/或解决方案。谢谢

$（函数（）{
var$container=$（'.container'）；
var current_zoom=1；
无功电流单元大小=20；
var cells_x=8；
var单元y=8；
var grid\u size\u x=单元格\u x*当前单元格\u大小；
var grid\u size\u y=单元格\u y*当前单元格\u大小；
var$grid=$（''）.addClass（'grid'）.css({
“宽度”：网格大小，
“高度”：网格大小
});
对于（var x=0；x
html，
身体{
位置：相对位置；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
html.container，
身体，容器{
位置：固定；
顶部：30px；
右：30px；
底部：30px；
左：30px；
溢出：自动；
边框：实心1px#000；
}
html.container.grid，
身体，容器，网格{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
}
html.container.grid.row，
body.container.grid.row{
显示器：flex；
}
html.container.grid.row:n子元素（奇数）。cell:n子元素（奇数），
body.container.grid.row:n子元素（奇数）。cell:n子元素（奇数）{
背景：#EEE；
}
html.container.grid.row:n子元素（偶数）。cell:n子元素（偶数），
body.container.grid.row:n子元素（偶数）。cell:n子元素（偶数）{
背景：#EEE；
}
html.container.zoom btns，
body.container.zoom btns{
位置：固定；
z指数：2；
右：50px；
底部：50px；
}
html.container.zoom btns按钮，
body.container.zoom btns按钮{
左边距：5px；
}

放大
缩小
< /代码> 我认为，不是使用<代码>宽度>代码> >代码>高度> /Case> CSS属性进行缩放，您应该考虑使用<代码>转换< /COD>和<代码>转换原点< /代码>属性。您可以使用
transform
的
scale
值进行缩放，然后将项目中心的坐标指定为
transform origin
值




谢谢。我已经试过了，得到了同样的结果。这就是我重新调整宽度和高度的原因。