Conclusiones clave
- Usa margin-inline: auto en una imagen de nivel de bloque con un ancho limitado.
- Usa text-align: center en el elemento padre cuando la imagen se comporta intencionadamente como contenido inline.
- Usa flexbox para la alineación unidimensional junto a pies de imagen, controles o elementos hermanos.
El método de centrado correcto depende de si una imagen es contenido inline, un bloque, un elemento dentro de un contenedor de maquetación o un recorte dentro de un marco fijo. La regla CSS más pequeña que se ajusta a ese papel suele ser la más robusta.
Lo más importante
- Usa place-items: center en grid cuando importan ambos ejes dentro de un área definida.
- Usa object-fit y object-position cuando centras los píxeles dentro de una caja de imagen fija en lugar de centrar el elemento en sí.
Identifica qué debe centrarse
El centrado puede referirse al elemento de imagen dentro de su padre, a los píxeles dentro de una caja de imagen fija o a todo un grupo que contiene una imagen, un pie de imagen y controles. Son problemas de maquetación distintos. Identifica el objetivo y el eje horizontal o vertical correspondiente antes de elegir el CSS.
Usa primero marcado semántico. Una imagen con pie de imagen suele corresponder a figure y figcaption, mientras que una imagen enlazada va dentro de un anchor con un nombre accesible útil. CSS debería organizar esa estructura en lugar de introducir elementos envolventes vacíos solo para imitar atributos de alineación obsoletos.
Centrado del elemento
Mueve la caja img con respecto a su bloque contenedor.
Centrado del contenido
Usa object-position para mover los píxeles renderizados dentro de una caja img cuando hay recorte o espacio sobrante.
Centra las imágenes en línea mediante el elemento padre
Un elemento img se comporta como contenido inline de forma predeterminada. Cuando ese comportamiento es intencionado, aplica text-align: center a su elemento padre. La regla centra todo el contenido inline de ese contexto de formato, incluidos el texto y otros elementos inline, así que acótala a un contenedor cuyo contenido completo deba compartir esa alineación.
Las imágenes inline se alinean con la línea base del texto de forma predeterminada, lo que puede dejar un espacio visible debajo de ellas. Ese hueco no es un margen. Establece display: block cuando la imagen no deba formar parte de una línea, o ajusta vertical-align cuando deba seguir siendo inline. Prueba el texto cercano, porque cambiar la alineación puede afectar a toda la caja de línea.
Buena opción
Usa este método en un contenedor sencillo de prosa o de figure en el que todo el contenido inline deba estar centrado.
Fallo común
Aplicar text-align directamente al img no centra el img, porque esa propiedad alinea los hijos en línea, no el elemento en sí.
Centra una imagen de bloque con márgenes lógicos
Para una imagen independiente, display: block y margin-inline: auto suelen ser la regla confiable más pequeña. Los márgenes en línea automáticos reparten por igual el espacio horizontal restante. El navegador necesita que el ancho usado de la imagen sea menor que el de su contenedor, así que dale a la imagen un ancho intrínseco o un ancho en CSS y limítalo con max-inline-size: 100%.
Las propiedades lógicas funcionan tanto en modos de escritura de izquierda a derecha como de derecha a izquierda, sin declaraciones separadas para izquierda y derecha. Esta técnica centra en horizontal, pero no en vertical. Tampoco puede producir un movimiento visible cuando la imagen ya ocupa todo el contenedor, porque no queda espacio en línea restante.
<img class="article-image" src="diagram.webp" alt="Request flow through three services" width="960" height="540" />
<style>
.article-image {
display: block;
inline-size: min(100%, 60rem);
block-size: auto;
margin-inline: auto;
}
</style>Conservar las dimensiones
Incluye los atributos width y height para reservar la relación de aspecto correcta antes de que se cargue el archivo.
Evitar el desbordamiento por tamaño fijo
Combina el ancho deseado con max-inline-size: 100% para que las ventanas gráficas estrechas puedan reducir la imagen.
Usa flexbox para la maquetación de componentes en una sola dimensión
Flexbox es apropiado cuando una imagen se organiza junto con pies de imagen, botones, insignias o imágenes hermanas a lo largo de un mismo eje principal. Con la dirección de fila predeterminada, justify-content centra a lo largo del eje principal horizontal y align-items centra a lo largo del eje transversal vertical. Si flex-direction cambia a column, esas responsabilidades se intercambian.
Centrar una sola imagen con flexbox funciona, pero úsalo porque el componente que la rodea se beneficia de una maquetación flex, no solo porque te resulte familiar. Decide si los elementos pueden pasar a otra línea, cómo se comportan los espacios entre ellos y qué debería ocurrir cuando un texto traducido o una fuente grande elegida por el usuario hacen que el contenido sea más alto de lo previsto.
.figure-row {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
min-block-size: 20rem;
}Varias imágenes
Usa flex-wrap y gap para una fila centrada que pueda mover los elementos a nuevas líneas sin desbordamiento.
Precaución en vertical
El centrado vertical requiere espacio disponible en el eje de bloque; un contenedor sin altura definida ni altura mínima no tiene espacio sobrante que repartir.
Usa grid cuando importan los dos ejes o las pistas
Grid resulta útil para centrar dentro de un área bidimensional definida. place-items: center combina align-items y justify-items, y centra el elemento de la cuadrícula en ambos ejes. Es especialmente claro para marcos multimedia, estados vacíos o superposiciones donde la imagen ocupa una sola celda de la cuadrícula.
Grid centra el elemento, no los píxeles que contiene. Si el img llena el área de la cuadrícula y object-fit recorta sus píxeles, usa object-position para el recorte interno. En las galerías, define de forma explícita las pistas adaptables y los espacios entre ellas para que el centrado no genere anchos de columna ni un orden de lectura impredecibles.
Patrón de superposición
Coloca una imagen y los controles en la misma área de la cuadrícula cuando deben alinearse sin posicionamiento absoluto.
Orden de lectura
Mantén un orden lógico en el DOM, porque la colocación visual en la cuadrícula no debería crear una secuencia confusa para el teclado o el lector de pantalla.
Centra los píxeles con object-fit y object-position
Un marco de imagen fijo puede necesitar mostrar imágenes de origen con distintas relaciones de aspecto. object-fit: cover llena el marco conservando la relación de aspecto y recortando los píxeles sobrantes. object-fit: contain conserva la imagen completa y puede dejar espacio sin usar. El valor predeterminado de object-position es 50% 50%, que centra los píxeles renderizados dentro de la caja del img.
Este método no centra el propio elemento img. Cambia la forma en que el contenido reemplazado se ajusta dentro de ese elemento. Si importa conservar una cara, un producto o un diagrama, define una posición focal intencionada o usa un recorte preparado por separado. center es un valor predeterminado neutral, no una prueba de que el contenido importante se haya conservado.
Evitar la distorsión
Evita forzar a la vez el ancho y el alto sin object-fit cuando la relación de destino difiere de la del origen.
Ofrecer un respaldo del marco
Define un color de fondo en las cajas de imagen que usan contain para que las zonas transparentes o sin usar parezcan intencionadas.
Mantén el preprocesamiento separado de la maquetación
El CSS debería seguir siendo el responsable del centrado. El procesamiento del lado del servidor resulta útil cuando las subidas de los usuarios llegan con dimensiones enormes, orientación inconsistente, formatos inadecuados o un tamaño de archivo excesivo. Normalizar esas propiedades puede reducir el trabajo de transferencia y decodificación, pero no sustituye a los márgenes de bloque, a flexbox, a grid ni al posicionamiento de objeto.
En un flujo de trabajo que procesa archivos multimedia subidos, una biblioteca de imágenes del backend o un servicio de derivados puede crear salidas acotadas o de tamaño exacto. Conserva la imagen completa cuando cada borde importa y usa un recorte aprobado solo cuando sea aceptable recortar. Guarda el original con los controles de acceso adecuados, publica solo los derivados necesarios y nunca supongas que un recorte geométrico centrado preserva el significado.
Límite de costos
No generes nuevos derivados solo para resolver un problema de alineación en CSS.
Límite de seguridad
Valida los límites de subida y mantén las credenciales de procesamiento fuera del navegador, sea cual sea la técnica de centrado.
Prueba los casos extremos de contenido y los estados de fallo
Prueba con imágenes verticales, horizontales, cuadradas, inusualmente pequeñas, transparentes y ausentes. Cambia el tamaño de la ventana gráfica, amplía el texto, cambia la dirección de escritura si es compatible y usa pies de imagen traducidos largos. Verifica que la imagen siga visible, no se desborde y no se superponga a los controles ni oculte los indicadores de foco.
Usa las herramientas de desarrollo del navegador para inspeccionar el valor de display del img, el ancho usado, el contexto de formato del elemento padre y las reglas heredadas. Muchos fallos de centrado provienen de una imagen a todo el ancho, una maquetación inesperada del elemento padre, un margen en conflicto o un contenedor sin altura. Añade pruebas orientadas al comportamiento para los nombres accesibles y el contenido visible, y reserva la revisión visual para la calidad del recorte.
Comportamiento cuando falta el archivo
Ofrece un texto alternativo útil para las imágenes con significado y asegúrate de que una petición fallida no colapse ni dañe el componente.
Estabilidad de la maquetación
El ancho y el alto intrínsecos permiten que el navegador reserve espacio antes de que se descargue la imagen.
Detalles técnicos que conviene conocer
- Los márgenes en línea automáticos solo centran un bloque cuando el navegador puede calcular el espacio restante, lo que significa que la imagen necesita un ancho usado menor que el de su bloque contenedor.
- Las imágenes en línea forman parte de una línea de texto y se alinean con la línea base de forma predeterminada, lo que puede dejar un espacio aparente debajo de la imagen que no proviene del margen ni del relleno.
- object-position tiene como valor predeterminado 50% 50%. Desplaza el contenido reemplazado dentro de su caja y no surte efecto a menos que object-fit o un desajuste entre las dimensiones intrínsecas y las renderizadas generen espacio sobrante o recortado.
- En Flexbox, align-items controla el eje transversal y justify-content controla el eje principal, por lo que la propiedad que centra una imagen cambia según flex-direction.
- En Grid, place-items es la abreviatura de align-items y justify-items, y centra el elemento de la cuadrícula en lugar de cambiar cómo se ajustan los píxeles dentro del elemento de imagen.
- Las propiedades lógicas como margin-inline se adaptan a los modos de escritura de izquierda a derecha y de derecha a izquierda; centrar con dos márgenes auto se comporta de forma idéntica que con márgenes físicos, pero los valores asimétricos de margin-left y margin-right no se adaptan.
Un enfoque práctico
- 1
Identifica si el requisito afecta al elemento, a sus píxeles o a ambos.
- 2
Dale a la imagen un ancho y un alto intrínsecos y limítala con max-inline-size: 100%.
- 3
Selecciona la primitiva de maquetación que ya usa el componente circundante.
- 4
Prueba pantallas estrechas, recursos inusualmente altos, imágenes faltantes y pies de imagen traducidos.
Límite de la arquitectura
El centrado de imágenes es un asunto de maquetación que resuelve CSS. El procesamiento de imágenes en el servidor puede normalizar las dimensiones, la orientación, el formato y el tamaño del archivo antes de la entrega, pero no sustituye a flexbox, a grid ni a la semántica del documento.
Preguntas frecuentes
¿Puedo centrar una imagen sin un elemento envolvente?
Sí. Convierte la imagen en un bloque, dale un ancho menor que el de su bloque contenedor y usa margin-inline: auto. Solo se necesita un elemento envolvente cuando la maquetación o la semántica circundantes exigen uno.
¿Cómo centro varias imágenes en una misma fila?
Usa un contenedor flex con justify-content: center, gap y flex-wrap cuando la fila debe adaptarse a pantallas estrechas. Grid es mejor cuando la galería necesita columnas definidas y alineación bidimensional.
¿Por qué parece que margin-inline: auto no hace nada?
Puede que la imagen siga siendo inline, que ocupe todo el ancho del contenedor o que tenga márgenes en conflicto. Los márgenes automáticos necesitan una caja de nivel de bloque con espacio en línea sobrante para repartir.
¿Cuál es la diferencia entre centrar una imagen y usar object-position?
Las propiedades de maquetación mueven el elemento img dentro de su padre. object-position mueve los píxeles renderizados dentro del elemento img cuando object-fit y unas relaciones de aspecto distintas generan recorte o espacio sobrante.
¿Puede el preprocesamiento centrar una imagen en una página web?
No. El preprocesamiento puede normalizar las dimensiones o la orientación, o recortar el archivo subyacente, pero CSS sigue controlando dónde aparece el elemento de imagen y cómo encajan sus píxeles dentro de la caja renderizada. Mantén separadas esas responsabilidades para que la maquetación siga siendo adaptable.