位于javascript中的居中对齐图像

我正在为一个班级项目制作网页，我已经设置了我的框架，但是我遇到了一个问题。我无法让这张照片在我的一生中居中对齐。它目前位于屏幕右侧，我无法移动它。您很可能需要将其粘贴到浏览器中，以准确显示正在发生的事情

initcomparations（）；
函数initcomparations（）{
变量x，i；
/*查找具有“覆盖”类的所有图元：*/
x=document.getElementsByClassName（“img comp覆盖中心”）；
对于（i=0；iw）位置=w；
/*执行将根据光标调整覆盖图像大小的功能：*/
幻灯片（pos）；
}
函数getCursorPos（e）{
变量a，x=0；
e=e | | window.event；
/*获取图像的x位置：*/
a=img.getBoundingClientRect（）；
/*计算光标相对于图像的x坐标：*/
x=e.pageX-a.左；
/*考虑任何页面滚动：*/
x=x-window.pageXOffset；
返回x；
}
功能幻灯片（x）{
/*调整图像大小：*/
img.style.width=x+“px”；
/*定位滑块：*/
slider.style.left=img.offsetWidth-（slider.offsetWidth/2）+“px”；
}
}
}

正文{
边距：0；}
#背景{
位置：固定；
排名：0；
左：0；
/*保持杨木比率*/
最小宽度：100%；
最小高度：100%；
}
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
背景色：rgba（0255255,0.3）；
背景滤镜：模糊（5px）；
-webkit背景滤镜：模糊（5px）；
最大宽度：100%；
最大高度：100%；
溢出：自动；
}
.中心{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
}
ul.topnav li{float:左；}
ul.topnav li a{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
ul.topnav li a:hover:not（.active）{背景色：rgba（47,79,79,0.6）；
背景滤镜：模糊（5px）；
-webkit背景滤镜：模糊（5px）；}
主动{背景色：rgba（112128144,0.6）；
背景滤镜：模糊（5px）；
-webkit背景滤镜：模糊（5px）；}
ul.topnav li.right{float:right；}
@媒体屏幕和屏幕（最大宽度：600px）{
ul.topnav li.对，
ul.topnav li{float:none；}
}
坦德布鲁先生{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
对齐内容：居中对齐；
自对准：居中；
背景色：#333；
背景色：rgba（47,79,79,0.5）；
背景滤镜：模糊（5px）；
-webkit背景滤镜：模糊（5px）；
溢出：自动；
左侧填充：10px；
右边填充：10px；
边框样式：实心；
边框颜色：深灰色；
边界半径：15px；
填充顶部：10px；
垫底：10px；
}
.家长{
位置：相对位置；
}
.孩子{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
*{框大小：边框框；}
.img comp容器{
位置：绝对位置；
高度：200px；/*应与图像的高度相同*/
最高：50%；
左：50%；
右：50%；
转换：翻译（-50%，-50%）；
}
.img comp img{
位置：绝对位置；
宽度：自动；
高度：自动；
溢出：隐藏；
}
.img comp img img img{
显示：块；
垂直对齐：中间对齐；
}
.img补偿滑块{
位置：绝对位置；
https://www.w3schools.com/howto/img_fjords.jpg  z指数：9；
光标：ew调整大小；
/*设置滑块的外观：*/
宽度：40px；
高度：40px；
背景色：#2196F3；
不透明度：0.7；
边界半径：50%；
}
#显示图像
{
自对准：居中；
}

对css进行以下更改。基本上，指定

左

一个百分比会相对于contai的宽度移动图像

.img-comp-container {
  position: absolute;
  left: calc(50% - 300px);
  top: calc(50% - 23px);
  height: 200px; /*should be the same height as the images*/
  width: 600px;
}

html,body{
  width:100%;
  height:100%;
  margin:0;
}