title: Center a div using Javascript
body: <p>I'm trying to center a div (screen center). This <code>div</code> is not a direct child of the <code>body</code> so I can't use css. Currently I use the following jQuery code in order to center it on my page:</p>
  
  <pre><code>    var dialog = $('#MyDialog');
      dialog.css('left', ($('body').width()/2) - (dialog.width()/2));
      dialog.css('top', ($('body').height()/2) - (dialog.height()/2);
  </code></pre>
  
  <p>The goal is to remove jQuery, I've already written this:</p>
  
  <pre><code>var showDialog = function(){
  
      var body = document.body;
      var html = document.documentElement;
  
      var bodyHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
      var bodyWidth = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );
  
      var dialogWidth = 800;
      var dialogHeight = 560;
  
      var dialog = document.getElementById('MyDialog');
      dialog.style.left = (bodyWidth/2) - (dialogWidth/2) + 'px';
      dialog.style.top = (bodyHeight/2) - (dialogHeight/2) + 'px';
  
      dialog.style.display = "block";
  }
  </code></pre>
  
  <p>The point is that <code>dialogWidth</code> and <code>dialogHeight</code> are dynamic. How can get them? </p>