CSS y el arte de centrar una imagen verticalmente

Centrar una imagen dentro de un div es una pregunta vieja que ha persistido en internet durante años. Durante mucho tiempo, la respuesta fue un circo: dependíamos de trucos como el `line-height` mágico, posicionamiento absoluto o tablas falsas.

Hoy sabemos que la respuesta adulta y aceptada es **Flexbox**. Es una forma legible que no depende del alto de la imagen ni rompe el flujo.

El problema del alineamiento

A veces, al usar `display: inline-block` para envolver elementos, parece que uno se hunde un poco más abajo que sus hermanos. Esto ocurre porque los navegadores alinean estos bloques por su línea base, y cuando el contenido tiene alturas diferentes, el bloque con la imagen queda desplazado.

La solución

El parche simple es usar `vertical-align: top` en esos contenedores para alinearlos correctamente. Si usas Flexbox desde el principio, te olvidas del problema por completo.