Thumbnail Images (varying aspect ratios) centered horizontal and vertical in 1:1 containers

[mattmikulla]

Hey folks. I’m so so with CSS but haven’t been able to find a solution.

I’m trying to create a responsive thumbnail gallery with the following requirements:

Thumbnails must be responsive and 3 across for desktop and 2 across for mobile. No biggie here.

The hard part. Thumbnail images varying in aspect ratio must be centered horizontally and vertically in a square 1:1 aspect ratio container with padding.

Any ideas?

Here is an image example: [Thumbnails Image](http://i.imgur.com/2rKp9zO.jpg “Example thumbnails image”)

Any help appreciated.

[jurotek]

div { width: some width;
height:some height;
vertical-align:middle;
display:table-cell;
}

img { display: block; margin: auto ; }

[mattmikulla]

Thanks everyone. @CrocoDillon may have nailed it. I will have to test later when I get home.

[mattmikulla]

So I am playing with the code provided by @CrocoDillon. Seems to get what I am looking for.

The only thing I’m having trouble with is getting some spacing between the square thumbnail containers which can be seen in my [reference image](http://i.imgur.com/2rKp9zO.jpg “Reference image”).

Trying some margins, padding and borders but failing.

[Author]

Posts