dynamisch Center div über ein anderes div

Question

Ich bin auf der Suche nach einem div ohne eine feste Breite über ein Video so, wenn das Fenster in der Größe geändert wird, schrumpft das div zusammen mit ihm aber in der Mitte bleiben. Die aktuelle Einstellung, die ich habe, ist in der Nähe zu korrigieren mit der linken: 50% mit halb negativen Rand. Das Problem ist offensichtlich, dass es sich nach links bewegt, da die negative Marge fixiert ist. Irgendwelche Ideen? Vielen Dank!

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

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

} 

Hier ist die FIDDLE

Answer 1

Dies ist möglich, mit dem Einsatz von transform: translate(-50%, -50%); dieses das innere Element Durch die Verwendung von dynamisch sein kann (keine Notwendigkeit für negative Marge), siehe dieses Beispiel

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