Javascript 图像覆盖不'；行不通

我尝试对图像进行覆盖，但有两个问题：

$（文档）.ready（函数（）{
$（'#boximagini img'）。单击（函数（）{
$（“#immagine img:最后一个孩子”）.remove（）
var source=$（this.attr（'src'）；
$（'#immagine'）。附加（“”）
$（'#overlay'）.fadeIn（'fast'）；
$（'框'）.fadeIn（'慢'）；
});
$（“.chiudi”）。单击（函数（）{
$（“#覆盖”）.fadeOut（'fast'）；
$（“#框”）.hide（）；
}); 
$（“#覆盖”）。单击（函数（）{
$（this.fadeOut（'fast'）；
$（“#框”）.hide（）；
}); 
});
.chiudi{
光标：指针；
}
.overlay{
位置：固定；
顶部：0px；
底部：0px；
左：0px；
右：0px；
z指数：100；
光标：指针；
}   
#框{
宽度：600px；
高度：400px；
显示：无；
z指数：+300；
位置：绝对位置；
左：30%；
最高：20%；
}

丘迪

克里卡
 < P>我这个小提琴我设置了你的改变颜色并且确定它总是在中间，设置左：50%和TrimeTe3-3D 50%总是因为位置绝对而将它设置到中心，如果你还想要垂直定位，那么对顶部和-50%做相同的Y（第二参数）：

我知道我可以使用相同的CSS类来处理这两个问题，但我希望保持清晰，并且不改变JS或CSS防御

希望这对您有所帮助。
您到底想做什么？可能重复：？当我单击图像（比原始图像小）时，在屏幕中间的一个框中淡入淡入，其中单击了图像，但大小与原始图像相同。如果窗口宽度小于具有原始大小的图像，则图像必须调整大小。当框fadein时，主体、覆盖层的颜色会发生变化。js脚本工作得很好，但我有这些problems@Sumurai8读这个问题。。。。。这是不可能重复的。在这种情况下，margin:0 auto（其他问题的答案）不起作用这不是唯一的方法，但这是最好的方法请注意，如果您将元素正确嵌套在覆盖中，滚动不会弄乱叠加图像的位置。现在是在中间，但我有一个问题，当窗口很小的时候，盒子也是如此，所以图像是很少的。问题是/@萨尔，请看我的jsfiddle@MapsismBorja当窗口很小的时候，你们希望发生什么？我希望盒子的宽度（也包括图片）像窗口一样。。。也许只有js或css3才有解决方案？
#box{ 
  width:600px; 
  height:400px;               
  display:none; 
  z-index: 300; 
  position:absolute; 
  top:20%;      
  left:50%;
  transform: translate3d(-50%,0,0);
}

#box img{
    position:absolute;
    left:50%;
    transform: translate3d(-50%,0,0);
}