title: center a div inside a fixed one at the center of the screen
body: <p>I have a div fixed at the top of my screen. Inside this div I put one with position absolute that I want to center in the middle of the screen.</p>
  
  <pre><code>#menu{
    position:fixed;
    width:100%;
    height:30px;
    background:#000;
  }
  
  #center{
  position:absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
      width: 100px;
      height: 100px;
      background:#fff;
  }
  </code></pre>
  
  <p>..</p>
  
  <pre><code>&lt;div id="menu"&gt;
  
  &lt;div id="center"&gt;
  how to center this div?
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>if I change the #menu position to relative it works fine... but I need this to be fixed. what is the problem that I cannot put div #center in the middle?</p>
  
  <p><a href="https://jsfiddle.net/y5s77mmq/1/" rel="nofollow">https://jsfiddle.net/y5s77mmq/1/</a></p>
  
  <p>thank you friends!</p>