centering all images across the whole website

[Desti]

Hey everyone,

My boss would like all the photos centered on our shopify website. They always used to manually center them in Photoshop. :0  I was wondering if there is a way to center the whole website? Here's the website, you can see that a lot of the images are bottom centered and not in the middle:

https://destinationinteriors.co.nz/collections/rattan

Is there a CSS code I could use? I've tried a few different ones but they don't seem to work.

Thank you !

[shahrozbabar5]

@Desti 

Thanks for sharing the site. You're right — many of the product images appear bottom-aligned, likely because the actual image files have whitespace or inconsistent canvas sizes. This isn’t a CSS issue alone, but you can visually center images using CSS, assuming you're okay with scaling them inside their container.

Try adding the following CSS:

.card__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__inner .media {
  object-fit: contain;
  height: 100%;
  display: block;
  margin: auto;
}

Steps to add this:

1. Go to Online Store > Themes > ... > Edit code.

2. Open base.css, theme.css, or component-card.css (depending on your theme structure).

3. Paste the code at the very bottom.

4. Save and refresh your site.

⚠️ Note: If your images are inconsistent in size (different dimensions or padding), Photoshop or bulk editing tools like Canva, Pixlr, or Bulk Resize Photos may still be needed for perfect results.

I’ll fix this for free and make the image grid fully centered. Just share your store URL and collaborator code.

[Nicola3]

Hi @Desti

I think this situation should be due to the pattern you use on the Collection page, as when I test to hide the images, the rest contents are not centred either.

Therefore, if you would like to eternally resolve this issue, better redesign the page pattern properly on your end. A kind reminder here!