title: dynamically center div over another div
body: <p>I'm looking to center a div without a fixed width over a video so if the window is resized, the div will shrink along with it but remain in the center.  The current set up I have is close to correct using the left:50% with half negative margin.  The issue is obviously that it moves left as the negative margin is fixed.  Any ideas? Thanks!</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id = 'top-container'&gt;
     &lt;video id='top-vid' autoplay loop width=100% height='auto' class='no-mobile'&gt;
         &lt;source src='DS_Intro.mov' type='video/mp4'&gt;
         &lt;source src='test.webm' type='video/webm'&gt;
     &lt;/video&gt;
  
     &lt;div id = 'top-content'&gt;
         &lt;div id = 'top-text'&gt;
             &lt;div id = 'top-img'&gt;
                 &lt;img src='ds_white.png' width = "100%" height = 'auto'&gt;
             &lt;/div&gt;
             &lt;h1 id = 'top-slogan'&gt;a boutique video production studio&lt;/h1&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#top-container{
      width:100%;
      height:100%;
  }
  
  #top-content{
      max-width:1200px;
      margin-right:auto;
      margin-left:auto;
  }
  
  #top-img{
      width:100%;
      padding-bottom: 10%;
  }
  
  #top-slogan{
      text-align:center;
      padding-bottom:10%;
      font-weight: 100;
      color:#5DBCD2;
  
  }
  
  #top-text {
      top: 50%;
      left: 50%;
      margin-left: -360px;
      position:absolute;
      width:50%;
  
  }
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/cBzXT/" rel="noreferrer">FIDDLE</a></p>