How do you center a video using CSS

Question

I am trying to focus the video on my site, but I do not want to use central tags in HTML, because it seems to be out of date. How to do it using CSS? Here is my HTML code if it helps.

<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 is an example: http://jsfiddle.net/Cn7SU/

Just add these CSS rules to the video element:

 display: block; margin: 0 auto; 

Adding the display: block property is very important. Otherwise, you cannot center the element.

Answer 2

Horizontal add to center of video:

 display: block; margin: 0 auto; 

Answer 3

Try this, you have a wrapper div around your video tag. html5 video and images are processed as text during styling. This will create the text-align: center. You can check the fiddle below.

 <div class="video"> <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> </div> 

Answer 4

Here are three ways to center the video:

1. Use of margin

 video { display: block; margin: auto; } 

2. Using conversion

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

3. Using container and flexbox

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