html中图片以图片中心放大旋转,图片旋转放大居中

屏幕中间有一个宽高未知的图片，点击旋转或放大按钮时，如何让图片始终在屏幕中间？

ps:代码如下，为什么还是不能居中，这有什么问题么？

Untitled Document

*{padding:0; margin:0;}

html,body{height:100%; position: relative;}

img{border:0; vertical-align: middle;}

#box{ position:absolute;}

$(document).ready(function(){

var width ='',

height = '',

src='images/123.jpg';

$('#boxImg').attr('src',src);

var img = new Image();

img.src = src;

img.onload = function(){

width = img.width;

height = img.height;

};

$('#box').css({

'width':width+'px',

'height':height+'px',

'marginLeft':-width/2+'px',

'marginTop':-height/2+'px',

'top':50+'%',

'left':50+'%'

});

});