How do you center a video using CSS

Question

I'm trying to center a video within my site but I don't want to use the center tags in HTML because it's kinda obsolete. How do I do this with CSS? Here's my HTML code if it's any help.

<center>
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</center> 

Answer 1

Here's an example: http://jsfiddle.net/Cn7SU/

Just add these CSS rules to the element video:

display: block;
margin: 0 auto;

Add the display: block property is very important. Otherwise you can't center the element.

Answer 2

Here are 3 ways to center your video:

1. Using margin

video {
  display: block;
  margin: auto;
}

2. Using transform

video {
  margin-left: 50vw;
  transform: translate(-50%);
}

3. Using a container & flexbox

.container video {
  display: flex;
  justify-content: center;
}