Pop up window alignment problem

Hi,

I have got a pop up window that always appears on the top left hand part of the screen then it moves to the center. I want it to appear in center and stay there. Below is the CSS, any CSS ideas and/or javascript ideas would be great!

.modal_window{
position:absolute;width:550px;top:20%px;left:60%;z-index:10;
}

.modal_window .modal_main{
position:absolute;background:#fff url(images/overlays/clouds3.gif) no-repeat left bottom;padding:15px 10px 25px 10px;overflow:auto
}

A simple example to put you on track:

<html>

<head>

<title>Test Page</title>

<style>
[page=home] {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}

#popup-container {
position:absolute;
top:50%;
left:50%;
width:200px;
height:30px;
display:none;
}

#popup-window {
padding:10px;
background:#ccc;
position:absolute;
top:-50%;
left:-50%;
width:200px;
height:30px;
text-align:center;
}
</style>

</head>

<body>

<div id=“container” page=“home”>
<a id=“openPopup” href=“#”>this is my first div</a>
</div>

<div id=“popup-container”>
<div id=“popup-window”>This is my popup. <a id=“closePopup” href=“#”>close</a></div>
</div>

<script type=“text/javascript”>
if(typeof document.addEventListener != ‘undefined’) {
document.getElementById(‘openPopup’).addEventListener(‘click’,function() {
document.getElementById(‘popup-container’).style.display = ‘block’;
}, false);
document.getElementById(‘closePopup’).addEventListener(‘click’,function() {
document.getElementById(‘popup-container’).style.display = ‘none’;
}, false);
}
else {
document.getElementById(‘openPopup’).attachEvent(‘onclick’,function() {
document.getElementById(‘popup-container’).style.display = ‘block’;
});
document.getElementById(‘closePopup’).attachEvent(‘onclick’,function() {
document.getElementById(‘popup-container’).style.display = ‘none’;
});
}
</script>
</body>
</html>