El problema.

Pegas el iframe oficial de Instagram (el que copias desde el menú "...→Insertar" del post) en tu web de WordPress. Esperas que quede centrado en el contenedor. Pero no: se queda pegado a la izquierda, dejando un hueco enorme a la derecha. Mal visualmente y mal para conversión.

Lo curioso es que pasa en casi cualquier tema (Hello Elementor, Astra, GeneratePress, Divi). No es bug del tema — es cómo Instagram entrega el embed.

Importante: el embed oficial de Instagram (<blockquote class="instagram-media">) tiene un max-width: 540px hardcoded. Sin un wrapper que lo centre, ocupa los 540px desde el borde izquierdo del contenedor padre.

Por qué pasa exactamente.

El código que te da Instagram empieza con algo así:

<blockquote class="instagram-media"
  data-instgrm-permalink="..."
  data-instgrm-version="14"
  style="background:#FFF; border:0; ... max-width:540px; min-width:326px; ...">

Ese max-width: 540px está bien para que el embed no sea infinito. Pero al no tener margin: 0 auto, no se centra automáticamente en su contenedor. WordPress lo inserta tal cual, así que termina alineado a la izquierda.

La solución CSS de 5 líneas.

Añade este CSS a tu sitio:

.instagram-media {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

Eso es todo. Tres propiedades:

  • margin-left: auto + margin-right: auto: centra horizontalmente.
  • display: block: garantiza que se comporta como bloque (no inline).
  • !important: sobreescribe el inline style que pone Instagram.

Dónde añadir el CSS.

Tres opciones según tu setup:

Opción 1: Customizer de WordPress (más fácil)

Apariencia → Personalizar → CSS adicional. Pega ahí el código y guarda. Sirve para toda la web.

Opción 2: Elementor (si lo usas)

Site Settings → Custom CSS. Mismo CSS, mismo resultado, mejor integrado con Elementor.

Opción 3: en el style.css del tema hijo

Si tienes child theme con CSS propio, añade ahí. Mejor para mantenerlo controlado.

Tip: si solo quieres centrar los embeds dentro de un contenedor específico (por ejemplo, dentro de la clase .entry-content que usan algunos temas), usa .entry-content .instagram-media en lugar de .instagram-media solo. Así no afecta otros lugares.

Mejoras adicionales.

1. Para que se vea bien en móvil:

.instagram-media {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 540px !important;
}

Añade width: 100% para que ocupe todo el ancho disponible hasta el máximo de 540px.

2. Para añadir espaciado vertical:

.instagram-media {
  margin: 32px auto !important;
  display: block !important;
}

Añade 32px arriba y abajo, sigue centrado horizontalmente.

3. Si tienes varios embeds en fila:

Crea un wrapper con display: flex y justify-content: center alrededor de cada uno. Útil para galerías de Instagram.

El problema del embed de Instagram lleva 5 años sin solución oficial. La comunidad lo arregla con CSS desde 2019 y nadie de Meta se ha dignado a actualizar la documentación. Bienvenido al mundo del desarrollo web.

Conclusión.

Centrar Instagram en WordPress es un problema de 3 minutos. La solución es 5 líneas de CSS. Si tu web depende de embeds de Instagram (típico en e-commerce, hostelería, eventos), aplica esto desde el día uno.

Y si quieres ir un paso más allá: considera usar plugins como Smash Balloon Instagram Feed que dan más control sobre la presentación y mejor rendimiento que el embed oficial.

AM

Alejandro Malatesta

Lead Developer & UX en Seeking Dog

Diseña y construye webs que cargan rápido y convierten. WordPress, Shopify y headless cuando toca. Si carga lento, llegará a sus manos antes del lanzamiento.