Iframe Align Center

John on March 08, 2022

To center align an HTML iframe, wrap it in a div tag and apply a text-align: center CSS property to it.

Here is an example of a YouTube video iframe that is aligned in the center of the page:

<div style="text-align:center;">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Mg5HOnq7zD0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Instead of applying inline CSS it is better practice to create a reusable text-align center CSS class like this:

<div class="text-center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Mg5HOnq7zD0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<style type="text/css">
  .text-center {
     text-align: center;
  }
</style>