How to center HTML5 Videos?

HTML CODE:

<div>
 <video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600"></video>
</div>

CSS CODE:

.center {
    margin-left: auto;
    margin-right: auto;
    display: block
}

I was having the same problem, until I realized that <video> elements are inline elements, not block elements. You need only set the container element to have text-align: center; in order to center the video horizontally on the page.


The center class must have a width in order to make auto margin work:

.center { margin: 0 auto; width: 400px; }

Then I would apply the center class to the video itself, not a container:

<video class='center' …>…</video>

Tags:

Html

Css

Video