动态中心div在另一个div

我正在寻找在视频中没有固定宽度的div，所以如果窗口被调整大小，div会随着它缩小但仍然居中。目前设置我已经接近正确使用左侧：50％和半负余量。这个问题显然是因为负利润率是固定的而向左移动。有任何想法吗？谢谢！动态中心div在另一个div

我的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

来源

2013-07-10 nictoriousface

在'＃top-text'规则中尝试'margin：50％auto 0;''' –