How to Center an iframe Horizontally? – HTML

An iframe, also known as an inline frame in HTML, is a frame embedded in an interface that looks like another screen or interface on an HTML document. In HTML, there is an iframe tag through which the iframes are created. When the iframe is created, it is, by default, displayed on the left side of the screen, but it can be moved and placed on the interface anywhere using the CSS style properties. To center the inline frame horizontally, the margin auto and display block properties are used.

Let’s understand this with a simple example.

Creating an iframe

Let’s discuss an example that creates a simple iframe through the iframe tag:

The above code contains “iframe” containing a link to the web page.

Simply creating an iframe with no CSS property applied to it will display the following results in the output interface. The iframe will be created but will be displayed on the left side by default:

Applying CSS Properties to Center the iframe

To move the iframe to the center, we need to apply the CSS properties on it. In the CSS style element, we simply need to first refer to the iframe and then add the margin auto and display block property:

In the above code snippet, there is a selector added to refer to the iframe, and inside the selector, there are the margin auto and display block properties that will move the iframe in the center horizontally.

The following will be the output interface after applying the properties:

This sums up how the iframe can be aligned to the center horizontally.

Conclusion

The iframe in HTML can be centered horizontally on a web page interface by adding the selector in the CSS style element referring to the iframe and then simply adding the CSS margin auto and display block properties for that iframe. This will place the inline frame in the center. This article explains well how to center the iframe horizontally.