How to Center iFrame in HTML

This post will look at many methods for centering an iFrame in an HTML document. The iframe element defines an inline frame.

Use an inline frame to embed another document into the current HTML document.

Center iFrame in HTML

1. display : block - An element’s rendering box type (display behavior) is specified by the display attribute. display: block displays a block element like a paragraph element for an element. It fills the entire width and begins on a new line.
2. text-align : center - The inner content of a block element is aligned using the text-align CSS attribute. These are the conventional values for text-align: left, which is the default value. The left side of the content is aligned.

To further understand the previous concept, consider the following example.

<div>div</div>
<iframe class="iFrame" src="data:,iframe"></iframe>

<hr>

<div id="all">
    <div>div</div>
    <iframe src="data:,iframe"></iframe>
</div>

div, iframe {
    width: 150px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

.iFrame {
    display: block;
    border-style: none;
}

#all{
    width: 150px;
    text-align: center;
}

In the preceding example, we defined two div with iframe. We defined the iframe with the display: block; attribute in the first div and then applied text-align: center; to the second iframe after enclosing it in a parent div.