Как центрировать img внутри div

Я пытаюсь что-то, что должно быть довольно легко, но я не могу понять, как это сделать.

У меня есть источник html:

`

И некоторые css:

 .product { width: 460px; height: 460px; } .product img { margin: auto; display: block; } 

Мое изображение хорошо горизонтально, но не вертикально. Я пробовал с некоторой position: relative; / bottom: 0; position: relative; / bottom: 0; но ничего не изменило …

Есть идеи, ребята?

Спасибо за помощь !

PS: Я нашел этот центр решений внутри

с CSS, но я предпочел бы сохранить мой HTML как это, и кажется невероятным, что он не сможет сделать это «мой» путь.

Попробуйте это – http://jsfiddle.net/tG9UK/

 .product { width: 460px; height: 460px; display: table-cell; vertical-align: middle; } 

Если вы хотите центрировать как по вертикали, так и по горизонтали, вы должны иметь возможность применять отображение: table-cell к div и использовать вертикальное выравнивание

 .product { display: table-cell; vertical-align: middle; text-align: center; width: 460px; height: 460px; } .product img { margin: auto; display: block; } 
 .product { width: 460px; height: 460px; line-height:460px; text-align:center; } 

http://jsfiddle.net/EHTeL/1/

Если размеры изображения статичны, то что-то вроде этого будет работать для вас

 .product img { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin-top: -150px; /* Half the height */ margin-left: -150px; /* Half the width */ }