Estoy intentando algo que debería ser bastante fácil, pero no puedo entender cómo hacerlo.

Tengo una fuente html como esta:

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

Y algunos css:

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

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

Mi imagen está bien alineada horizontalmente pero no verticalmente. Lo intenté con algunosposition: relative; / bottom: 0; Característica pero no cambió nada ...

¿Alguna idea chicos?

Gracias por tu ayuda !

PD: encontré esta solucióncentrar <IMG /> dentro de un <DIV> con CSS pero prefiero mantener mi HTML así y parece increíble para no poder hacerlo "a mi manera".