How to center video tag in a div tag?

css

Solution

If you do not know your video's with you can still center it using css transforms:

video {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Problem

I cannot seem to position this video tag with the usual "margin: 0px auto 0px auto;" Help lads! Thanks for looking into this! ``` #wrapper #trailer { position: absolute; z-index: 3; margin-top: 55px; width: 987px; height: 620px; background-color: #000; margin-right: auto; margin-bottom: 0px; margin-left: auto; border: 1px solid #009; } #wrapper #trailer #close { position: absolute; z-index: 2; top: 20px; right: 231px; cursor: pointer; } #wrapper #trailer video { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border: 1px solid #009; } ``` and html and explaining my scenario as requested : ``` <div id="trailer"> <img id="close" src="images/close.png" alt="close" /> <div id="video"> <video controls autoplay="autoplay" poster="video/trailer.jpg" width="600" onclick="if(/Android/.test(navigator.userAgent))this.play();"> <source src="video/trailer.mp4" type="video/mp4" /> <source src="video/trailer.webm" type="video/webm" /> <source src="video/trailer.ogv" type="video/ogg" /> <embed src="video/flashfox.swf" width="600" height="480" flashVars="autoplay=true&amp;controls=true&amp;loop=true&amp;src=trailer.mp4" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" /> </video> </div> </div> ```

Original source