title: Centrally aligned, scrollable div in fixed container
body: <p>I'm struggling to centrally align a <code>div</code> within a <code>div</code> with <code>position:fixed</code> (I need it fixed as this UI will float over the rest of an existing page). The central <code>div</code> will contain a considerable amount of content so needs to scroll vertically. It also needs to scale horizontally with respect to the viewport with a maxwidth. </p>
  
  <p>Here's what I have so far - it is almost there - just can't work out how to centralise the yellow <code>div</code>.</p>
  
  <p><a href="http://jsfiddle.net/p7F3u/" rel="nofollow">http://jsfiddle.net/p7F3u/</a></p>
  
  <p><em>EDIT</em> I need to support IE9, FF, Chrome, Safari if possible</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;style&gt;
          div {
              padding: 0px;
              margin: 0px;
          }
          #fix {
              position: fixed;
              left: 0px;
              right: 0px;
              top: 0px;
              bottom: 0px;
              background-color: red;
          }
          #my-wrap {
              position: relative;
              margin: 1em auto;
              background-color: green;
              width: 100%;
              height: 100%;
          }
          #my-details {
              position: absolute;
              width: 50%;
              max-width: 450px;
              top: 20px;
              background-color: yellow;
              bottom: 0px;
              overflow: scroll;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="fix"&gt;
          &lt;div id="my-wrap"&gt;
              &lt;div id="my-details"&gt;
                  &lt;p&gt;Lots of content in here....&lt;/p&gt;
                  &lt;br style="clear: both" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks!</p>