div centro dinamicamente su un altro div

Question

Sto cercando di centrare un div senza una larghezza fissa su un video, quindi se la finestra viene ridimensionata, il div si restringerà con esso ma rimarrà al centro. L'impostazione corrente che ho è vicina alla correzione usando la sinistra: 50% con margine mezzo negativo. Il problema è ovviamente che si sposta a sinistra mentre il margine negativo è fisso. Qualche idea? Grazie!

mio 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> 

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

} 

Ecco la FIDDLE

Answer 1

Ciò è possibile con l'uso di transform: translate(-50%, -50%); Utilizzando questo l'elemento interno può essere dinamico (non è necessario il margine negativo), vedere questo esempio

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