động trung tâm div trên div khác

Question

Tôi đang tìm trung tâm div mà không có chiều rộng cố định trên video vì vậy nếu cửa sổ được thay đổi kích thước, div sẽ co lại cùng với nó nhưng vẫn ở giữa. Các thiết lập hiện tại tôi có là gần đúng bằng cách sử dụng trái: 50% với một nửa lợi nhuận âm. Vấn đề rõ ràng là nó di chuyển sang trái khi lề âm được cố định. Bất kỳ ý tưởng? Cảm ơn!

HTML của tôi:

<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 của tôi:

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

} 

Đây là FIDDLE

Answer 1

này có thể với việc sử dụng các transform: translate(-50%, -50%); Bằng cách sử dụng các yếu tố bên trong có thể năng động (không cần lề âm), hãy xem ví dụ này

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