How can I center a video in HTML?

I am trying to simply center video in HTML, how can I do it without using "margin:0 auto", is there any other way to center video using CSS or HTML? Below is my sample HTML

   <video controls>
    <source src="video.mp4" type="video/mp4" />


Asked by:- bhanu
: 577 At:- 10/14/2021 4:05:19 PM
HTML center video html

1 Answers
profileImage Answered by:- vikas_jk

There are many ways to center a video using HTML, here are few

  • Using Margin {
      display: block;
      margin-left: auto;
      margin-right: auto;


  • Using Transform in CSS
    video {
      margin-left: 50vw;
      transform: translate(-50%);
  • Using HTML Center Tag
     <video width="400" controls>
      <source src="mov_bbb.mp4" type="video/mp4">
      Your browser does not support HTML video.


  • Using Flexbox
    .container video {
      display: flex;
      justify-content: center;

You can also review this Responsive center image using pure CSS or Bootstrap 3/4 which can be helpful.

Hope it helps.

At:- 10/14/2021 4:18:50 PM
Thanks, it was easy, I think it is better to use < center > HTML tag. 0
By : bhanu - at :- 10/25/2021 7:41:00 AM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use