動態中心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;''' –