title: How do I center vertically and horizontally a div inside the body element without absolute positioning?
body: <p>I have read countless Q&amp;A's and blog posts about vertically aligning and centering divs, but I cannot get the simplest case to work: an empty 20x20 div directly in the html body.</p>
  
  <p>html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body
      {
          background-color:DarkGray;
          display:table;
      } 
  
      .box
      {
          background-color:black;
  
          display:table-cell
          margin:0, auto;    
          
          width:20px;
          height:20px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="box"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
   
     </code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the <a href="http://jsfiddle.net/8At93/382/" rel="nofollow noreferrer">JSFiddle</a>.</p>