title: centering the div that's centered in a div
body: <p>the .menu div is centered (the left side of it is) I want it to center based on its width, but I cannot set it's width since it's based on Wordpress links. Same with height, I would like it exactly centered height/width.</p>
  
  <p>css</p>
  
  <pre><code>.menu {
   position: absolute;
   left: 50%; top: 50%;
   background: #fff;
  }
  
  .nav-wrapper {
   position: relative;  
   height: 100%;
   width: 100%;
   }
  .overlay{
   position: fixed;
   display: none;
   z-index: 50;
   top: 0; left: 0;
   height: 100%; width: 100%;
   background: rgba(0, 0, 0, 0.85);
   overflow: auto;
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="overlay"&gt;
    &lt;div class="nav-wrapper"&gt;
      &lt;nav class="menu"&gt;
          &lt;?php wp_nav_menu( array( 'container_class' =&gt; 'main-nav', 'theme_location' =&gt; 'primary' ) ); ?&gt;
      &lt;/nav&gt;
    &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>