Dynamically center a div over another div

Question

I am looking for the center of a div without a fixed width above the video, so if the window is resized, the div will shrink along with it, but remain in the center. My current setting is close to the correct one using the left one: 50% and a half of the negative field. Obviously, the problem is that it moves to the left, since the negative margin is fixed. Any ideas? Thanks!

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

My 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%; } 

Here is FIDDLE

Answer 1

This is possible when using transform: translate(-50%, -50%); Using this, the inner element can be dynamic (no negative field is needed), see this example.

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