The 3 Best Ways to Center a Video in HTML

HTML or any front-end language can be a real pain when the function you are trying to achieve is not being applied.

Whether you are embedding a video or linking to a video source URL, without knowing how to center a video in HTML, it will default to the margins set for your page layout style.

If you have no margins set, the video will be pushed tightly to the left of your screen.

For presentation purposes, videos look better when positioned in the middle of a screen.

To be able to do that, several methods can be deployed. One of those is often touted as the simplest, however, it is outdated and should not be used because of its unpredictability. (Perhaps that happened to your layout already).

Discover which methods work and the ones that don’t (and why not) in this HTML tutorial to get your videos centered!

Each method, the steps, and the precautionary notes are detailed in the following tutorial.

1. Wrap your video source code within a div tag with the text alignment centered to center a video in HTML

The div tag is used as a section divider within an HTML document.

When a div tag is applied, the content within the container is treated with block-level style elements rather than anything you declare as an inline style element, such as what could be placed within a <span> tag.

Div tags instruct browsers and screen readers that the content between them is a separate container block. Not an in-line element. It is treated with a line break.

It is better to use divs than a center tag in HTML only because the intent of the div in HTML5 is for presentation.

It is irrelevant from a functional perspective, such as when used by screen readers, which is why HTML5 has the <video> HTML tag. Screen readers will not read the source code.

There are two parts to using div containers in HTML.

Step 1: Name your class in the “style” section of your document

Within your HTML document, the top part of your layout will (or should have) something like the codes below.

The “!DOCTYPE HTML” attribute tells browsers that you are using HTML5. As HTML5 works seamlessly with CSS, your style attributes can be set within the head section.

To clarify: The head section is everything between…

Notice in the code earlier that <style> is added there. This is where you can bounce between HTML and CSS.

If you do not have a style section, add it.

Then apply a CSS name by placing a period (.) directly before the name that you will use as your div class or div id.

The div class or div id is the HTML code to call up your style elements.

Step 2: Call the style function in the body section of your HTML

The name you used in your style section is what you will use to call up the center styling within the body of your document.

This is done by using the HTML below:

In practice, the logical styling to apply would be:

2. Center a block element within the HTML style section of your document to center a video in HTML

This method uses margin auto for both left and right margins. The reason this works is that both margins are assigned equal values. The result is a horizontally centered container.

To center videos in HTML using this method, use the codes below in the style section of your HTML document…

The above code explained

The “display: block” part is used to ensure that when the video class is called up in a div tag, it is treated as a block rather than a browser attempting to treat it as an in-line block, similar to a span tag.

Margin-left and margin-right are set to auto because by applying that to both page margins, the content within the div container becomes horizontally centered. Both margins are automatically assigned equal values.

In the above example, the width is set to 50%. This can be anything apart from 100%, or it will not work. Another time this will not work to center a video, or any div container block is if your container does not have a width set.

To center a video in HTML using margin auto, the width of the video must be set.

As an example

Inserting your video source code within a div container without setting a width will prevent your video from centering using this method.

3. Wrap the video in a “center” tag to center a video in HTML (unreliable)

This method is the least reliable, yet most browsers still support it.

It is as simple as placing

… above the code for your video into the body of your HTML document, then closing the center tag at the end of your video source code.

The problem with the <center> tag

The trouble with using the HTML center tag is that it was deprecated in 1999 when HTML4 was introduced.

Following that, since 2014, web browsers have been using HTML5 with support for XHTML and DHTML too. That is how old using the HTML center tag is.

In theory, the HTML center tag should be obsolete. It is deprecated but still supported to an extent.

That is because deprecated does not mean that all browsers stopped using it. In software terms, deprecated means that things have progressed to a stage where there are better ways to do the same thing.

For backward compatibility, many popular browsers still support the HTML center tag, but not all. Particularly new browsers.

What you may find is that your video can be centered on Chrome, but not on IE, Opera, Safari, or Android browsers.

Whether the center tag works now or not, it is not ideal to use this method because it can be dropped by browsers at any time. One browser update can wipe out this styling.

If (or when) that happens, your default web page layout will be applied.

Instead, to center a video using HTML only, apply the style within a div container. Like this

The above code is an inline element that does not require any use of CSS.

The downside is that if you apply any styling using CSS at a block level, such as applying a border around the video, this will not work.

Block-level HTML and CSS override inline elements.

If you want to add styling to block levels in HTML5 (the latest version supported by all browsers), apply the styling within the <head> section of your HTML template. Not the <body> area.

Here’s a little summary on how to center a video in HTML based on what we discussed in this article:

How to center a video in HTML

Three methods that work to center all media types include:

1. Wrap your video source code within a div tag with the text alignment centered
2. Center a block element within the HTML style section of your document
3. Wrap the video in a <center> tag (unreliable)