How to Center an Iframe

Techwalla may earn compensation through affiliate links in this story.
Image Credit: Stockbyte/Stockbyte/Getty Images

Iframes are an HTML element that allows you to display another web page within the current page. The iframe element is usually placed in the center of a page. It has several properties, so you can format it according to the web page style. These format properties include the ability to center the iframe within the web page and center the file within the frame. Centering the frame involves adding the "align" property within the iframe HTML code and using a div tag to center it on the web page. Editing the HTML code can be done using a simple text editor like Notepad, or a more advanced console like Visual Studio.


Step 1

Open your HTML editor and load the file that has the iframe coded.

Video of the Day

Step 2

Type "align=middle" into the HTML iframe code. The code below is an example of a centered iframe:


This code centers the internal page within the iframe.

Step 3

Use a div tag to center the iframe within the web page. The code below encapsulates the iframe and centers it on your web page.



Step 4

Save the page. Use your web browser to test the new settings. Open the page in a web browser and view the iframe location. It's now centered on the page.



Report an Issue

screenshot of the current page

Screenshot loading...