Set jQuery .css() based on variable

Set jQuery .css() based on variable

I'm trying to set the margin-top and margin-left to half of there elements
respective size so to center it. Logically this should work however it
just goes 50% on the left and top.
var $img = document.getElementsByClassName('box');
var $width = $img.clientWidth;
var $height = $img.clientHeight;
$('#overlay').append('<div id="boxOverlay"></div>');
$('#boxOverlay').css('position', 'fixed');
$('#boxOverlay').css('top', '50%');
$('#boxOverlay').css('margin-top', '-$height/2');
$('#boxOverlay').css('left', '50%');
$('#boxOverlay').css('margin-left', '-$width/2');
$('#boxOverlay').css('max-height','80%');
$('#boxOverlay').css('max-width','90%');
$('#boxOverlay').height($height);
$('#boxOverlay').width($width);