확대/축소 중에 이미지를 가운데에 배치하려면 어떻게합니까?

Question

줌인 후 중앙에 이미지가 필요합니다. 어떤 Jquerys도 사용할 수 없습니다.
지금 오른쪽으로 이동하고 오버레이로 확대하지만 오른쪽 끝에있는 이미지는 브라우저 화면 끝 부분에서 잘립니다.

<script> 
var target;  //global container for currently clicked div 
var timer; 
var tick = 40; 
var diffw = 341; 
var diffh = 235; 
var trans = 0.5; //opacity 
var zoomed = false; //boolean, can only be true or false 


function startAnimation(divname) { 
    target = divname; 
    if (zoomed==false) { 
     timer = setInterval("zoomPhotoIn()",tick); 
    }else { 
     timer = setInterval("zoomPhotoOut()",tick); 

    } 
} 

function zoomPhotoIn() { 
    trans += 0.02; 
    diffw += 15; 
    diffh += 10; 

    document.getElementById(target).style.opacity = trans; 
    document.getElementById(target).style.width = diffw+"px"; 
    document.getElementById(target).style.height = diffh+"px"; 
    document.getElementById(target).style.zIndex = 5; 

    if(diffw >= 700) { 
     clearInterval(timer); 
     zoomed = true; 
    } 
} 

function zoomPhotoOut() { 
    trans -= 0.02; 
    diffw -= 15; 
    diffh -= 10; 

    document.getElementById(target).style.opacity = trans; 
    document.getElementById(target).style.width = diffw+"px"; 
    document.getElementById(target).style.height = diffh+"px"; 
    document.getElementById(target).style.zIndex = 1; 

    if(diffw <= 341) { 
     clearInterval(timer); 
     zoomed = false; 
    } 

} 

</script> 

Answer 1

이것은 기본적으로 답 형식의 @ Shmiddty의 설명입니다. 50 %; 마진 가기 : -height/2; 마진;

<script> 
var target;  //global container for currently clicked div 
var timer; 
var tick = 40; 
var diffw = 341; 
var diffh = 235; 
var trans = 0.5; //opacity 
var zoomed = false; //boolean, can only be true or false 


function startAnimation(divname) { 
    target = divname; 
    if (zoomed==false) { 
     timer = setInterval("zoomPhotoIn()",tick); 
    }else { 
     timer = setInterval("zoomPhotoOut()",tick); 

    } 
} 

function zoomPhotoIn() { 
    trans += 0.02; 
    diffw += 15; 
    diffh += 10; 

    document.getElementById(target).style.opacity = trans; 
    document.getElementById(target).style.width = diffw+"px"; 
    document.getElementById(target).style.height = diffh+"px"; 
    document.getElementById(target).style.zIndex = 5; 
    document.getElementById(target).style.marginLeft = (diffw/2) + "px"; 
    document.getElementById(target).style.marginTop = (diffh/2) + "px"; 

    if(diffw >= 700) { 
     clearInterval(timer); 
     zoomed = true; 
    } 
} 

function zoomPhotoOut() { 
    trans -= 0.02; 
    diffw -= 15; 
    diffh -= 10; 

    document.getElementById(target).style.opacity = trans; 
    document.getElementById(target).style.width = diffw+"px"; 
    document.getElementById(target).style.height = diffh+"px"; 
    document.getElementById(target).style.zIndex = 1; 
    document.getElementById(target).style.marginLeft = (diffw/2) + "px"; 
    document.getElementById(target).style.marginTop = (diffh/2) + "px"; 

    if(diffw <= 341) { 
     clearInterval(timer); 
     zoomed = false; 
    } 

} 

</script>