How to center an iframe horizontally?

html

responsive-design

css

best-practices

byAnton Shumikhin·Sep 8, 2024

Center an iframe horizontally by applying CSS margin: auto; and display: block; to your iframe. Don't forget to specify a width for the iframe:

<iframe src="yourfile.html" style="display: block; margin: auto;" width="300" height="200"></iframe>

This code causes the iframe to center within its parent container as smoothly as a buttered sliding door.

How to center an iframe using different methods

Flexbox: CSS's middleman

Flexbox offers a flexible solution to center your iframe. Just set the parent container to display: flex; and use justify-content: center;, and voila!

.parent {
  display: flex;
  justify-content: center;
  /* Parent container be like: Who needs a yoga class when I can flex here */
}

Include your iframe within this set class like so:

<div class="parent">
  <iframe src="yourfile.html" width="300" height="200"></iframe>
</div>

CSS Grid: Not just for spreadsheets

CSS Grid provides robust control over your layout. To center an iframe, set the container to display: grid; and center the iframe using place-items: center;.

.parent {
  display: grid;
  place-items: center;
  /* Parent container be like: I've got my grid and it's got my back */
}

Then, put your iframe into this parent:

<div class="parent">
  <iframe src="yourfile.html" width="300" height="200"></iframe>
</div>

Always responsive, never rude

To maintain responsive design, employ CSS media queries to ensure your iframe remains beautifully centered on different screen sizes. Tweak the iframe's width or max-width according to the device's screen:

@media (max-width: 600px) {
  iframe {
    width: 100%;
    max-width: 300px;
    /* iframe be like: New size who dis? */
  }
}

Pitfall protection plan

Quick heads up on potential downfalls:

Inline styles are quick but messy. External CSS files for styles is the way to go.
Beware of other CSS properties such as float bulkying their way into your centering effort.
Ensure you've got a valid URL as the iframe source for seamless content display.

Follow these best practices for a walk in the park

Keep your code clean and future-proof

Leave behind deprecated HTML attributes and make CSS equivalents your go-to. Always favor external stylesheets over quicker, but messier inline styles.

Test across different environments

Keep an eye out and frequently validate your center alignment across various browsers and devices. Inconsistency might turn into a wild goose chase later.

Learn to position with precision

For more control over the iframe's exact position, make good use of advanced CSS positioning. Just remember to get comfortable with the stacking context and positioning values like relative, absolute, and fixed.