title: How to place a popup message in center of the div?
body: <p>I have a div block for which I am calculating its width and offset height on the basis of the calculation below. Now I am trying to place the message holder block inbetween the div block.</p>
  
  <p>My aim is to show the message "popup" block in the center of the div "oID_1". Can anybody help me?</p>
  
  <pre><code>&lt;BODY&gt;
    &lt;head&gt;
    &lt;script&gt;
    function msgBox(message) {
      var msgbox = document.getElementById("msgbox");
      msgbox.innerHTML = message;
      var x = (window.innerWidth / 2) - (msgbox.offsetWidth / 2);
      var y = (window.offsetHeight / 2) - (msgbox.offsetHeight / 2);              
      msgbox.style.top = y;
      msgbox.style.left = x;
      msgbox.style.display = "block";
    }
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
    .popup {
      width:100px;
      height:100px;
      position:absolute;
      display:none;
      border:1px solid green;
    }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
    function showPopup(id) {
      var popup = document.getElementById(id);
      var divblock=document.getElementById('oID_1');
      width=parseInt(oID_1.style.width);
      var x = (width / 2) - (popup.offsetWidth / 2);
      var y = (divblock.offsetHeight / 2) - (popup.offsetHeight / 2);              
      popup.style.top = y;
      popup.style.left = x;
      popup.style.display = "block";
    }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;DIV CLASS="body"&gt;
    &lt;center&gt;
    &lt;div id="popup" class="popup"&gt;
      This a vertically and horizontally centered popup.
    &lt;/div&gt;
    &lt;a onclick="showPopup('popup');"&gt;Show Popup&lt;/a&gt;
    &lt;DIV ID="oID_1" STYLE=" width:300; height:300;border:1px solid red"&gt;
    &lt;/DIV&gt;
    &lt;/center&gt;
  &lt;/DIV&gt; 
  &lt;/BODY&gt;
  </code></pre>