How to Center a Video in HTML [4 ways]

Today I'm going to talk about four ways to center a video in HTML. Centering a video can be tricky, but with the right steps it's easy and straightforward. Here are the four ways you can do it.

1. Using text-align property.
2. Using margin auto.
3. Using absolute positioning.
4. Using CSS Flexbox.

Center a video using CSS text-align property.#

The first method is by using the <center> tag. This tag centers any content that comes after it until another center or similar tags are used.

To use this method, simply wrap the code for your video inside of a <center> and </center>. The example is given below.

<div style="text-align:center;">
  <video>
    <source src="my-video.mp4" type="video/mp4">
  </video>
</div>

How to center a video in HTML using margin auto.#

The second way is through CSS styling with margin auto on both sides of the element (in our case, video). Simply add "margin-left:auto;margin-right:auto;" within style attribute like so :

<video style= 'margin-left:auto; margin-right:auto; display:block">
  <source src="my-video.mp4" type="video/mp4">
</video>

Center a video in HTML using absolute positioning.#

To center a video in HTML using absolute positioning, you can use the following code.

<style>
.container {
  position: relative;
}

.container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
  <div class="container">
  <video width="640" height="360" controls>
    <source src="my-video.mp4" type="video/mp4">
  </video>
</div>

In the above example, the parent div has position: relative; to allow the child video to be positioned absolutely with respect to it. The video element has top: 50%; and left: 50%; to align it to the center of the parent container, and the transform: translate(-50%, -50%); rule centers the video itself by offsetting it 50% of its own width and height in the opposite direction of the parent container.

Center a video using CSS Flexbox.#

This is one of the easiest methods for centering videos as all you need to do is use display:flex; and justify-content:center; on your parent element containing your video tag.

<div style="display: flex; justify-content: center; align-items: center;height: 100vh">
  <video width="640" height="360" controls>
    <source src="my-video.mp4" type="video/mp4">
  </video>
</div>

In this example , the parent div uses display: flex;, justify-content: center;, and align-items: center; to center the child element video horizontally and vertically. The height: 100vh; property ensures that the parent div is the same height as the viewport, so that the centering works correctly.