How to vertically and horizontally align image in div? [duplicate] - html

Question

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Image center align vertically and horizontally
I'm uploading images to a php file so I can resize them to a certain width or height, which ever is smaller. The image resizer I'm using is a class from phpclasses.org and it seems to be working pretty good. The problem is, not all images are the same size. Some are wide and narrow while some are almost square. So this is causing all the images to position on the top of my div and not the middle. My thought is to have CSS perfectly center the images so the different sizes look decent when viewed, but I can get them to center horizontally but not vertically. Here's a screenshot of what I"m trying to center:
As you can see the guns are aligned on top of the div? I can't use a hard coded figure to push it center since other images will have different heights. I need some way of determining the size of the image and figuring it from there.
Here's the code for the div's that the images are in:
#product {
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
#product-image {
margin:2px auto;
width:194px;
height:145px;
border:1px solid #999;
text-align:center;
}
Thanks for having a look.

Answer 1

#product
{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
#product img
{
vertical-align: middle;
max-height: 200px;
max-width: 200px;
}
Max-Height / Max-Width is used to handle images that may be too large.

Answer 2

For dynamic vertical alignment where you cant use position absolute i suggest using javascript for an absolute fix across all situations but you can use several techniques seen in the following Guide for vertical alignment
$(document).ready(function(){
var image = ​$('#product-image')​​​​​​​​​;
var container = $(image).parent();
var margin = (container.height() - image.height()) / 2;
image.css('margin-top', margin);
});
with the following CSS
#product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
text-align:center;
}
#product-image
{
margin:2px auto;
width:194px;
height:145px;
border:1px solid #999;
}​

Answer 3

<div id="product">
<div id="product-Inner">
<img id="product-image" src="imageURL" />
<div>
<div>
style css
#product {
float:left;
display: table;
box-sizing: border-box;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
text-align:center;
}
#product-Inner {
display: table-cell;
vertical-align: middle;
text-align:center;
}
#product-image {
box-sizing: border-box;
max-height: 100%;
max-width: 100%;
border:1px solid #999;
}

Answer 4

you can easily get your desired results through display:table-cell & vertical-align:middle;
CSS
#parent {
width:200px;
height:200px;
display:table;
background-color: black;
float:left;
margin:5px;
}
#parent-image {
display:table-cell;
vertical-align:middle;
text-align:center;
}
DEMO