Vertically Centering Images

New Member
8 0 0

Hello everyone,

First off, my store is and the password is D!sknmi192

I am trying to make it so the images in the product grid on are centered. Currently, they all start at the same point at the top and the title and price are a fixed distance below that. I want to make it so the center of each image is a constant distance away from the title and price. A good place to see what I mean is at the bottom of the home page, where you can see the "eyes" product centered vertically. Go back to the collections page and it is not vertically centered, and is a large distance away from the title.


This is not a problem for most products, but any designs that are wide will result in that large distance between the image and the title. I have tried multiple solutions so the code may be slightly messy, but I can say for sure that nothing I have added has had an impact on the collection grid, as I have not dealt with it until now.

Shopify Partner
12398 1505 4493


Welcome to the Shopify community!
and Thanks for your Good question.

Please share your issue images,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Expert | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
New Member
8 0 0

Apologies, but I managed to find a solution to my issue. Now I have a different problem, I can't find the CSS which influences the size of the images in the product grids, and I need to reduce their size percentage. Any idea how I would go about this? If I need to start a new thread for this I understand, specifically I am only looking to reduce the image size on mobile to under 100% of the desktop size.

*In the future for those who look up this thread for the original issue, my solution was replacing the code in theme.css on the Debut style under .grid-view-item__image and tweaking it a bit, so the resulting code looked like this

.grid-view-item__image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);