La mia discussione è nata proprio dal fatto che CSS non offre un comando univoco per il centramento verticale di oggetti in un div, nonostante esista da vari anni e il problema sia tutt'altro che secondario
Da quel che ricordo (molto vagamente) è un problema insito nell'algoritmo del box-model CSS, legato alla complessità nel calcolo degli ingombri in altezza dei vari elementi durante il processo di elaborazione della pagina... o qualcosa del genere , per cui risulta impervio da sempre (almeno finché non sono stati sviluppati altri modelli come flex-box) ottenere un codice CSS che risolva facilmente l'allineamento in verticale.

Qualcuno una volta scrisse (liberamente tradotto):
Il modo più semplice per centrare verticalmente qualcosa in CSS è chiudere il tuo laptop e andare al bar.
(fonte: https://twitter.com/thedaniel/status/414123893830336513)

Condivido

La soluzione ottimale sarebbe quella usata da Ebay per le immagini a corredo di una inserzione
che applicata al tuo codice, è questa:
codice:
div.foto {
    position: relative;
    float: left;
    height: 200px;
    width: 200px;
    margin: 10px;
}
img.prodotto {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
Ti dirò... non la conoscevo, ho verificato e mi pare buona. Non si finisce mai di imparare