Marco flotante del Centro HTML

Esta publicación analizará muchos métodos para centrar un iFrame en un documento HTML. El elemento iframe define un marco en línea.

Use un marco en línea para incrustar otro documento en el documento HTML actual.

Centrar iFrame en HTML

1. display: block: el tipo de cuadro de representación de un elemento (comportamiento de visualización) se especifica mediante el atributo display. display: block muestra un elemento block como un elemento de párrafo para un elemento. Ocupa todo el ancho y comienza en una nueva línea.
2. text-align : center: el contenido interno de un elemento block se alinea utilizando el atributo CSS text-align. Estos son los valores convencionales para text-align: left, que es el valor por defecto. El lado izquierdo del contenido está alineado.

Para comprender mejor el concepto anterior, considere el siguiente ejemplo.

<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;
}

En el ejemplo anterior, definimos dos div con iframe. Definimos el iframe con el display: block; atributo en el primer div y luego aplicado text-align: center; al segundo iframe después de encerrarlo en un div padre.