Setting pop up div at the center of the screen

Question

I am creating a pop-up div. Its size is 521px, and height 400px.

Now I want to set it get displayed at the center of the screen or browser window irrespective of the size of the browser window.

Here's my JavaScript code:

<script type="text/javascript">
function show_update_profile()
   {
       document.getElementById('black_fade').style.display='block';
       var dw = document.getElementById('div_register').style.width;
       alert(dw);
       document.getElementById('div_register').style.left= ((window.innerWidth)-dw)/2;
   }
</script>

The line alert(dw); displays the div width, but the line after that isn't working.

Answer 1

Should be:

//remove extra dot
document.getElementById('div_register').style.left= ((window.innerWidth)-dw)/2;

Answer 2

dw is a string ending in px ; you'll want to call parseInt on it first to get the number by itself. However, using JavaScript is the long way around a problem that can be solved easily with CSS:

#div_register {
    left: 50%;
    top: 50%;
    margin: -200px -260px;
}

Answer 3

What is the output of alert(dw)? If this contains some measurement unit (like "123px") you need to parse it into an int before using it in the calculation:

var dw = parseInt(document.getElementById('div_register').style.width);