Help with Javascript/ css popup window

[suavedesign]

I have a javascript/ css popup on my webpage.
While the rest of the content on my page is centered, even when I resize my page, the popup stays in the same place, which means it's centered on my screen, but not all screens of all users.
How do I center the popup, so that it moves when I resize the page, and always sits in the center?
The content of my page has

margin:0 auto;

, which makes it centered, no matter the size of the screen. I tried doing that to the popup, but it didnt help.
I am posting my code here:
CSS for popup:

#popUpDiv {
position:absolute;
margin-left:-120px;
background-color:none;
width:300px;
height:300px;
z-index: 9002;
}

Javascript for popup:

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-150;//150 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-150;//150 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}

And here's a link to the webpage I am referring to:
http://www.totalrecallsolutions.com/marketing.html

I am assuming that the problem might be because the popup div is

position:absolute;

. But when I removed that, the popup got messed up...

Please help asap!
Thank you!

 

[leroy30]

.divOuter {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}

.divInner
{
width:300px;
height:300px;
margin:0 auto 0 auto;
}

Something to that effect? ...

 

[suavedesign]

I'm confused.
Which part of my HTML code should get these classes?
Thanks