Layout Recipe

Center an Image with Tailwind Flexbox

Images are inline elements, so classic centering tricks often fail. The reliable fix: put 'flex justify-center items-center' on the image's parent container, and the image centers both ways regardless of its dimensions. This works for logos in cards, avatars in list rows, and hero illustrations. If you only need horizontal centering, 'flex justify-center' alone does it — or use 'mx-auto' on the image itself with 'block'.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.