How to Center a Video in CSS?

Centering a video in CSS is a common requirement when designing responsive and visually appealing web pages. Whether you want to horizontally, vertically, or both horizontally and vertically center a video, CSS provides multiple ways to achieve this.

In this blog, we will explore different CSS techniques to center a <video> element, including flexbox, grid, margin auto, and absolute positioning.

1. Center a Video Horizontally Using margin: auto;

If the <video> element has a fixed width, you can center it horizontally using margin: auto; and setting display: block;.

Example:

.video-container {
    width: 80%; /* Adjust width as needed */
    max-width: 800px; /* Optional max width */
    margin: auto;
    display: block;
}

<video class="video-container" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

✅ Best for: Simple layouts where only horizontal centering is needed.

2. Center a Video Horizontally and Vertically Using Flexbox

Flexbox is one of the easiest and most responsive ways to center a video both horizontally and vertically.

Example:

.video-wrapper {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full viewport height */
}

.video-container {
    width: 80%;
    max-width: 800px;
}

<div class="video-wrapper">
    <video class="video-container" controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

✅ Best for: Responsive designs and fullscreen video centering.

3. Center a Video Using CSS Grid

CSS Grid is another powerful tool for perfect centering of a video.

Example:

.video-wrapper {
    display: grid;
    place-items: center; /* Centers both horizontally and vertically */
    height: 100vh;
}

.video-container {
    width: 80%;
    max-width: 800px;
}

<div class="video-wrapper">
    <video class="video-container" controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

✅ Best for: Clean, simple layouts with full-page centering.

4. Center a Video Using position: absolute;

You can also use absolute positioning to center a video relative to its container.

Example:

.video-wrapper {
    position: relative;
    height: 100vh;
}

.video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
}

<div class="video-wrapper">
    <video class="video-container" controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

✅ Best for: When you need to center an element within a specific section.

Which Method Should You Use?

Conclusion

Centering a video in CSS is easy with methods like margin: auto; for horizontal centering, Flexbox and Grid for full centering, and absolute positioning for specific layouts. Choosing the right method depends on your design needs and responsiveness.