динамический центр 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/