How to Center Align an Iframe with CSS?

An iframe(<iframe>) is an HTML element that allows web developers to embed another HTML document within the current document.

It basically allows web developers to display content from another website or web application within their own pages, such as a video(youtube videos nowadays) or a map from a third-party service, or anything like that.

When you embed an iframe into your webpage, it must be properly aligned(mostly centered) for a better user experience.

If you have already tried to center align the iframe and nothing worked for you, don’t worry, we will show you different ways to center align the iframe with simple CSS code.


1. Center Align Iframe using Margin Auto

By default, the <iframe> element is an inline-level element. In HTML, inline elements are those elements that do not start on a new line and only take up as much width as necessary to display their content such as <span>, <a>, <img>, etc.

So, if you have already tried to center align the <iframe> using margin: auto;, it might haven’t worked for you. This is because the margin: auto; only works with block-level elements that have a fixed width.

Block level elements are those elements that start on a new line and take up the full width of their parent element.

Therefore, to center align the <iframe> using margin: auto;, you have to first make it a block-level element by setting its display property to block.

Let’s say we have an iframe inside a div element:

<div>
    <iframe src="https://www.wikipedia.org" width="200" height="200">
    </iframe>
</div>

Now, to center align this <iframe> element, we will first make it a block-level element using display: block; property and then apply margin: auto;. It will automatically pull the iframe to the center of its parent(<div> here):

div{
    border: 2px solid hotpink;
    padding: 10px;
}
iframe{
    display: block;  /* Make block type */
    margin: auto;  /* Browser calculates margin */
}

Sample Output:

Center align an iframe with margin auto

As you can see from the above output, the Wikipedia iframe is center aligned to its parent <div> element.

You can preview the changes live by running the below code editor:

div{
    border: 2px solid hotpink;
    padding: 10px;
}
iframe{
    display: block;  /* Make block type */
    margin: auto;  /* Browser calculates margin */
}

2. Center Align Iframe using text-align Property

The text-align property in CSS is used to horizontally align the text content of an element. Other than the text, it also applies to those elements which are inline in nature.

This means we can also use the text-align property to center align the <iframe> element as it is an inline-level element.

Let’s say we have an <iframe> inside a div element:

<div>
    <iframe src="https://www.wikipedia.org/" width="200" height="200">
    </iframe>
</div>

To center align the <iframe> inside the div element, we can apply the text-align: center; on the div itself.

This will pull the iframe into the center of the div:

div{
    border: 2px solid crimson;
    padding: 10px;
    text-align: center; 
}

Sample Output:

Center align iframe using text-align property

Please note that applying text-align: center; on the div element will also pull its text and other inline elements to its center along with the iframe.


3. Center Align Iframe using CSS Flexbox

CSS flexbox is a flexible layout module that lets you easily create responsive webpages without using the float and position properties.

The flexbox module can also be used to align things both horizontally as well as vertically.

To center align an iframe element with CSS flexbox, you have to first put the iframe in a container and then make the container a flex container by setting its display property to flex.

Now, to center align the iframe horizontally, you can use the justify-content property. Simply set the justify-content property to center, and the iframe will be pulled to the center of its flex container.

<div>
    <iframe src="https://www.wikipedia.org/" width="200" height="200">
    </iframe>
</div>

Now add the following CSS:

div{
    display: flex;  /* Make flex container */
    justify-content: center; /* Center horizontally */
    border: 2px solid crimson;
    padding: 10px;
}

Sample Output:

Center align iframe using CSS flexbox

If you also want to center align the <iframe> vertically, you can use the align-items property of the flexbox module.

Simply set the align-items property to center and the iframe will be pulled to the center of the flex container vertically.

div{
    display: flex;  /* Make flex container */
    justify-content: center; /* Center horizontally */
    align-items: center;
    border: 2px solid crimson;
    padding: 10px;
    height: 300px;
}

Sample Output:

Center align iframe vertically and horizontally using CSS flexbox

Conclusion

In this article, we learned different ways of aligning an iframe to the center of its parent element.

In summary, the simplest way to center align an <iframe> in CSS is to use the text-align property. As the <iframe> is an inline-level element in HTML, therefore, if you apply text-align: center; on its parent element, the <iframe> will be pulled to its center.

You can also use the margin: auto; property, but this works only when you make the <iframe> a block-level element by applying display: block; on it.

Thanks for reading.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts