Estou tentando algo que deve ser bem fácil, mas não consigo descobrir como fazer isso.

Eu tenho fonte html assim:

<div class="product">
  <img src="product123.png" />
</div>`

E alguns css:

.product {
    width: 460px;
    height: 460px;
}

.product img {
      margin: auto;
      display: block;
}

Minha imagem está bem alinhada horizontalmente, mas não verticalmente. Eu tentei com algumposition: relative; / bottom: 0; recurso, mas isso não mudou nada ...

Alguma ideia pessoal?

Obrigado pela ajuda !

PS: Eu encontrei esta soluçãocentro <IMG /> dentro de um <DIV> com CSS mas eu preferiria manter meu HTML assim e parece inacreditável não ser capaz de fazer "meu" caminho.