Html 如何对齐脚本中没有父级的图像？

我想创建一个图像库，其中部分图像被隐藏，并在单击时显示。我的主要问题是，如何将单击裁剪图像后显示的图像居中？这些图片可能有助于理解我的问题

这是我目前的代码：

.网格容器{
保证金：自动；
最大高度：600px；
最大宽度：1400px；
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr；
}
小手指克莱因{
高度：300px；
宽度：700px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/little-finger-klein.png")不重复;；
}
.小指毛{
位置：绝对位置；
高度：600px；
宽度：1400px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/little-finger-ganz.png")不重复;；
}
贾斯特·克莱因先生{
高度：300px；
宽度：700px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/just-ate-klein.png")不重复;；
}
贾斯特格罗斯先生{
位置：绝对位置；
左边距：自动；
右边距：自动；
高度：600px；
宽度：1400px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/just-ate-ganz.png")不重复;；
}
杰克·克莱因先生{
高度：300px；
宽度：700px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/socket-klein.png")不重复;；
}
.总插座{
位置：绝对位置；
左：8px；
顶部：8px；
高度：600px；
宽度：1400px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/socket-ganz.png")不重复;；
}
皮茨基·克莱因先生{
高度：300px；
宽度：700px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/pitschi-klein.png")不重复;；
}
皮茨基·格罗斯先生{
位置：绝对位置；
左：8px；
顶部：8px；
高度：600px；
宽度：1400px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/pitschi-ganz.png")不重复;；
}
画廊
var light=document.getElementById（'littlefingerklein'）；
light.addEventListener（'click'，函数（light）{
light.target.classList.toggle（'little-finger-gross'）；
})
var light2=document.getElementById（'justateklein'）；
light2.addEventListener（'click'，函数（light2）{
light2.target.classList.toggle（'justate-gross'）；
})
var light3=document.getElementById（'socketklein'）；
light3.addEventListener（'click'，函数（light3）{
light3.target.classList.toggle（'socket-gross'）；
})
var light4=document.getElementById（'pitschiklein'）；
light4.addEventListener（'click'，函数（light4）{
light4.target.classList.toggle（'pitschi-gross'）；
})

图像实际上有一个父对象，它们在DOM中，只是在脚本中引用。如果要将它们放置在同一位置，可以像之前一样使用

position:absolute

，但还需要指定

top:0

和

left:0

将它们移动到右侧位置

请注意，

position:absolute

会将元素定位在其最近的父元素中，该父元素没有默认的

position:static

属性集。要将它们锚定在同一位置，可以将它们的公共父级

.grid container

更改为其他内容，如

position:relative

。这将导致所有子元素具有

位置：绝对；排名：0；左：0与网格容器的左上角对齐



.网格容器{
保证金：自动；
最大高度：600px；
最大宽度：1400px；
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr；
位置：相对位置；
}
小手指克莱因{
高度：300px；
宽度：700px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/little-finger-klein.png")不重复;；
}
.小指毛{
位置：绝对位置；
左：0；
排名：0；
高度：600px；
宽度：1400px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/little-finger-ganz.png")不重复;；
}
贾斯特·克莱因先生{
高度：300px；
宽度：700px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/just-ate-klein.png")不重复;；
}
贾斯特格罗斯先生{
位置：绝对位置；
左边距：自动；
右边距：自动；
左：0；
排名：0；
高度：600px；
宽度：1400px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/just-ate-ganz.png")不重复;；
}
杰克·克莱因先生{
高度：300px；
宽度：700px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/socket-klein.png")不重复;；
}
.总插座{
位置：绝对位置；
左：0；
排名：0；
高度：600px；
宽度：1400px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/socket-ganz.png")不重复;；
}
皮茨基·克莱因先生{
高度：300px；
宽度：700px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/pitschi-klein.png")不重复;；
}
皮茨基·格罗斯先生{
位置：绝对位置；
左：0；
排名：0；
高度：600px；
宽度：1400px；
背景：url（'https://un-aesthetic.com/wp-content/uploads/2020/11/pitschi-ganz.png")不重复;；
}
画廊
var light=document.getElementById（'littlefingerklein'）；
light.addEventListener（'click'，函数（light）{
light.target.classList.toggle（'little-finger-gross'）；
})
var light2=document.getElementById（'justateklein'）；
light2.addEventListener（'click'，函数（light2）{
light2.target.classList.toggle（'justate-gross'）；
})
var light3=document.getElementById（'socketklein'）；
light3.addEventListener（'单击