title: CSS / HTML: centering absolute element in browser window regardles of parent position (parent also absolute)
body: <p>Have a problem centering an element (div, but thats beside the point) in the browser window horizontally. Have no problem positioning it compared to its parent element, but want it to break free from this HORIZONTALLY - but still keep its relation to it vertically. Maybe I'm asking too much? :-) I can do it with position:fixed, but then the element freezes in one position in the browser regardles...</p>
  
  <pre><code> #parent li {
      display:inline;
      text-align:center;
      float:left;
      position:relative;
      padding: 12px 10px 4px 10px;
      margin-right:10px;
      height:28px;
      border:none;
  
      }
  .child {
      margin:16px 0px 0px 0px;
      float:left;
      z-index: 100;
      position:absolute;
      text-align:left;
      padding:0;
      border:1px solid #BBBBBB;
      border-top:none;
      line-height:14px;
  }
  </code></pre>
  
  <p>I can also ask in another way: this is what I want horizontally:</p>
  
  <pre><code>.child { 
  margin:16px 0px 0px 0px; 
  float:left; 
  z-index: 100;
  left: calc(50% - 400px); 
  left: -moz-calc(50% - 400px); 
  left: -webkit-calc(50% - 400px); 
  position:fixed; 
  top:inherit; 
  text-align:left; 
  padding:0; 
  border:1px solid #BBBBBB; 
  border-top:none; 
  line-height:14px;
  }
  </code></pre>
  
  <p>that leaves it in the middle regardles of the parent. Great. BUT - when you scroll down on the page, if the child is visible, it stays put, whereas the rest of the content scrolls. And if you have scrolled a bit so the parent is not in its original position from the top, the child will not align with the parent but appear from top where the parent originally was, pixel wise... which is not optimal... :-/</p>