Center different size images in the same block size

Question

I have different images encapsulated in square style blocks that I would like to always center in but I'm having a heck of a time trying to get them to do so.

I made an example of what's happening to me in similar design. Notice the product (the grill) is not actually centered in the imgblock container.

This starts to become very apparent with other product images that are much wider than narrow.

 .imgBlock { width:100px; height:100px; border:2px solid black; margin:1px; padding:4px; } .imgBlock img{ max-height:100%; max-width:100%; margin:auto; display:block; } 

 <div class="container"> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066"> </div> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066"> </div> </div> 

Answer 1

First set the image to full width and height (or as desired). Now you can add object-fit: contain to contain the image to the imgBlock and now use object-position: center to align it - see demo below:

 .imgBlock { width:100px; height:100px; border:2px solid black; margin:1px; padding:4px; } .imgBlock img{ height:100%; /* set full height */ width:100%; /* set full width */ display:block; object-fit: contain; /* constrains the image maintaining aspect ratio */ object-position: center; /* default position is center - so optional in this case */ } 

 <div class="container"> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066"> </div> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066"> </div> </div> 

Answer 2

You can use the older positioning attributes as well as the Flex techniques. Make the main block position relative. Then set the img inside that block to position: absolute. Place that block element to top: 50% left: 50% of the parent element. Since this goes by the top left corner it will be slightly of the center. We will then use transform: translate(-50%, -50%) to bring it back to the true center.

More on position here at the MDN.

 .imgBlock { position: relative; width:100px; height:100px; border:2px solid black; margin:1px; padding:4px; } .imgBlock img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height:100%; max-width:100%; display:block; } 

 <div class="container"> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066"> </div> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066"> </div> </div> 

Answer 3

You can add display: flex to imgBlock , then center horizontally with justify-content and vertically with align-items .

 .imgBlock { display: flex; align-items: center; justify-content: center; width:100px; height:100px; border:2px solid black; margin:1px; padding:4px; } .imgBlock img{ max-height:100%; max-width:100%; margin:auto; display:block; } 

 <div class="container"> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066"> </div> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066"> </div> </div> 

Answer 4

You can set position relative to your div .imgBlock . After that set the position absolute to your <img/> with all coordinates to 0 and margin auto.

Remember that a position absolute is referred to the nearest parent with position relative.

 .imgBlock { width:100px; height:100px; border:2px solid black; margin:1px; padding:4px; position:relative; } .imgBlock img{ max-height:100%; max-width:100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } 

 <div class="container"> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066"> </div> <div class="imgBlock"> <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066"> </div> </div>