title: Centering a div overlay
body: <p>I'm trying to center a div that overlays the entire image. I have a jQuery script that is suppose to check the size of the document (width and height), divide it, and set the div's width. Which I believe should center the contents in the middle of the page.</p>
  
  <pre><code>&lt;head&gt;  
      &lt;style type="text/css"&gt;
          .boxWrapper{
              min-width:640px;
              min-height:480px;
              margin-left:auto;
              margin-right:auto;
              vertical-align:center;
              padding: 15px 10px 10px 30px;
              z-index:8;
          }
          .box {
              margin-left:auto;
              margin-right:auto;
              vertical-align:center;
              z-index:8;
          }
          .blackOut {
              position: absolute;
              top:0px;
              left:0px;
              z-index: 5;
              width:100%;
              height:100%; 
              background-color: rgba(0,0,0,.8);
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body bgcolor="#DCDCDC"&gt;
      &lt;div class="pageWrapper"&gt;   
      &lt;div class="binShadow"&gt;
          &lt;div class="bin"&gt;       
              &lt;table id="tableBin" border="0"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;name&lt;/th&gt;
                      &lt;th&gt;description&lt;/th&gt;
                      &lt;th&gt;location&lt;/th&gt;
                      &lt;th&gt;duration&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;a href='A001C010_111129_R1VL.mov'&gt;A001C010_111129_R1VL.mov&lt;/a&gt;&lt;/td&gt;
                          &lt;td&gt;dolor sit amet, consectetur adipiscing elit. Fusce bibendum, leo non.&lt;/td&gt;
                          &lt;td&gt;dr101&lt;/td&gt;
                          &lt;td&gt;:60&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;a href="A001C011_111129_R1VL.mov"&gt;A001C011_111129_R1VL.mov&lt;/a&gt;&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/td&gt;
                          &lt;td&gt;dr101&lt;/td&gt;
                          &lt;td&gt;:60&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
                  &lt;/div&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  &lt;script&gt;
      $("#tableBin a").on("click", function(e) {
       e.preventDefault();
       var url = $(this).attr("href");
       var overlay = jQuery('&lt;div class="blackOut"&gt;&lt;div class="boxWrapper"&gt;&lt;div class="box"&gt;&lt;video src="'+url+'" /&gt;&lt;/video&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
       var left = "width:"+width($document)/2+"px";
       var top = "hieght:"+hieght($document)/2+"px";
       ​
       $('&lt;/span&gt;').text(data).css('width', left).appendTo('#boxWrapper');
       $('&lt;/span&gt;').text(data).css('height', top).appendTo('#boxWrapper');
       overlay.appendTo(document.body);
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>