divを別のdivに動的に中央div

Question

私はビデオの上に一定の幅を持たないdivを中心にしたいので、ウィンドウのサイズが変更されると、divは縮小されますが中央に残ります。私が持っている現在の設定は、左を使用して正確に近づいています：半分の負のマージンで50％。問題は明らかに、負のマージンが固定されているので、左に移動するということです。何か案は？ありがとう！

マイHTML：

は

<div id = 'top-container'> 
    <video id='top-vid' autoplay loop width=100% height='auto' class='no-mobile'> 
     <source src='DS_Intro.mov' type='video/mp4'> 
     <source src='test.webm' type='video/webm'> 
    </video> 

    <div id = 'top-content'> 
     <div id = 'top-text'> 
      <div id = 'top-img'> 
       <img src='ds_white.png' width = "100%" height = 'auto'> 
      </div> 
      <h1 id = 'top-slogan'>a boutique video production studio</h1> 
     </div> 
    </div> 
</div> 

マイCSS：ここ

#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%; 

} 

があるFIDDLE

Answer 1

これは動的であることができ、この内側の要素を使用することによりtransform: translate(-50%, -50%); の使用によって可能です（負のマージンは必要ありません）、この例を参照してください

http://jsfiddle.net/Mfsfm/2/