Cannot perfectly center an element

[gago]

I am having trouble perfectly centering a div with a dynamic size that changes depending on the dimensions of the image the user has uploaded. The function is supposed to position the div absolutely in the center of the screen over all of the other content, however it is off by a small percentage regardless of the image I use... See below:http://i.imgur.com/F9NNDAH.jpgHere is the css:\[code\].prompt_background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: black; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; display: none;}.prompt_box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: white; z-index: 1; display: none; position: fixed; top: 50%; left: 50%; behavior: url(PIE.htc);}.prompt_content { width: 100%; margin: 10px;}\[/code\]And the way with which I load it is this:\[code\]function showprompt() {$('.prompt_box') .css("margin-left", -(($('.prompt_box').width())/2)+"px") //Horizontal center .css("margin-top", -(($('.prompt_box').height())/2)+"px"); //Vertical center$('.prompt_background') .css('height', $(document).height()) .css("width", $(document).width()); //Background stretch$('.prompt_background') .css('filter', 'alpha(opacity=50)'); //Background opacity$('.prompt_background, .prompt_box') .fadeIn(500); //Animation}\[/code\]As for the HTML, it's just three empty divs which I load content into via ajax\[code\]<div class="prompt_background"></div><div class="prompt_box"> <div class="prompt_content"> </div></div>\[/code\]