Tecnología Electrónica

Cómo centrar un iframe en HTML (horizontal y vertical)

Un <iframe> incrusta otra página web dentro de la tuya. Centrarlo requiere CSS moderno (Flexbox/Grid), no atributos obsoletos como align="middle" (HTML4, deprecado). Aquí las mejores técnicas actuales.

Centrar horizontalmente (lo más común)

Método 1: Flexbox en el contenedor (recomendado)

<div class="iframe-container">
  <iframe src="https://ejemplo.com" title="Descripción" loading="lazy"></iframe>
</div>

<style>
.iframe-container {
  display: flex;
  justify-content: center;  /* centrado horizontal */
  /* align-items: center;   /* si también quieres centrado vertical (ver abajo) */
  width: 100%;
}
iframe {
  max-width: 100%;  /* responsive: no se desborda en móvil */
  border: none;
}
</style>

Método 2: Grid (una línea)

.iframe-container {
  display: grid;
  place-items: center;  /* centra horizontal Y vertical */
}
iframe { max-width: 100%; }

Método 3: Margin auto (si iframe es block)

iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

Requiere ancho definido (px o %) en el iframe o contenedor.

Centrar horizontal Y vertical (pantalla completa / modal)

.iframe-modal {
  position: fixed;
  inset: 0;              /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.8);  /* overlay opcional */
  z-index: 1000;
}
.iframe-modal iframe {
  max-width: 90vw;
  max-height: 90vh;
  width: 800px;   /* ancho deseado */
  height: 600px;  /* alto deseado */
  border: none;
  border-radius: 8px;
}

Centrar el CONTENIDO dentro del iframe

No puedes desde la página padre (política de mismo origen / Same-Origin Policy). Solo si controlas la página incrustada:

  • En la página hija: body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
  • O en el iframe: <iframe src="pagina.html" style="display:flex; justify-content:center; align-items:center;"> NO FUNCIONA (el estilo se aplica al iframe, no a su contenido).

Responsive: Aspect-ratio (16:9, 4:3, 1:1)

.iframe-responsive {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;  /* mantiene proporción */
}
.iframe-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Centrado horizontal del contenedor responsive */
.wrapper { max-width: 800px; margin: 0 auto; }

Atributos importantes del iframe (accesibilidad, seguridad, rendimiento)

<iframe
  src="https://ejemplo.com"
  title="Descripción significativa del contenido"  /* OBLIGATORIO para accesibilidad (WCAG) */
  loading="lazy"                    /* Carga diferida (offscreen) */
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"  /* Restringe capacidades */
  referrerpolicy="no-referrer-when-downgrade"
  allow="fullscreen; picture-in-picture"  /* Permisos de características */
  width="800" height="450"            /* Fallback para layout antes de CSS */
  style="max-width:100%; border:none;"
></iframe>

Tabla: Qué NO uses (obsoleto / malas prácticas)

ObsoletoPor quéAlternativa moderna
align="middle" / align="center"Atributo HTML4 deprecado, no estándar HTML5CSS Flexbox/Grid/margin-auto
<center><iframe></center>Etiqueta <center> obsoleta (HTML5)CSS en contenedor
frameborder="0"Atributo obsoletoCSS: border: none;
scrolling="no"Atributo obsoletoCSS: overflow: hidden; en página hija o scrolling="no" solo si necesario (evita)

Consejo

Siempre pon title descriptivo en el iframe (lectores de pantalla). Usa sandbox con los mínimos permisos necesarios. Para YouTube/Vimeo/Mapas, usa sus códigos de inserción (embed) ya optimizados.

>

<

Vida inteligente