Centrage vertical dans une DIV

Bonjour,

NB :
Bien que cette question comprenne une partie de code PHP et son résultat HTML,
la question porte sur du CSS.

Je fais une galerie de photos dans un répertoire. Dans ce répertoire, outre les photos (dont le nombre est variable), il n'y a qu'un fichier PHP (index.php) qui va lire le contenu du répertoire et afficher les photos qui s'y trouvent. Certaines photos ont été prises en mode paysage, d'autres en mode portrait.

Pour éviter un affichage approximatif, je fais le choix d'afficher chaque photo dans une DIV de 300px sur 300px. Si la photo est prise en mode paysage, la largeur est réduite à 300px, si elle a été prise en mode portrait, c'est la hauteur qui est réduite à 300px. Jusque là, ça le fait correctement.

La DIV de 300x300 possède un style pour que la photo en mode portrait soit centrée horizontalement et ça, c'est bon ; et que la photo en mode paysage soit centrée verticalement et ça, je n'y arrive pas. Sa largeur est bien réduite à 300px mais la photo est affichée en haut de la DIV.

Code PHP :

function redim($info) {
    $larg = $info[0];
    $haut = $info[1];
    if($larg > $haut) { $dim = "width=\"300\"";  /* mode paysage */  }
    else              { $dim = "height=\"300\""; /* mode portrait */ }
    return $dim;
}
function showpics() {
    if ($handle = opendir('.')) {
        while (false !== ($file = readdir($handle))) {
            if ($file != "." && $file != ".." && $file != "index.php") {
                $infoimg = @getImageSize("./$file");
                $dim = redim($infoimg);
                echo "   <div class=\"pic\">";
                echo "<a href=\"$file\" target=\"_blank\"><img src="""$file\" ".$dim." /></a></div>\n";
            }
        }
    closedir($handle);
    }
}

Cela donne ce HTML :

<div id="pics">
   <div class="pic"><a href="img1.jpg" target="_blank"><img src="" width="300" /></a></div>
   <div class="pic"><a href="img2.jpg" target="_blank"><img src="" height="300" /></a></div>
   <div class="pic"><a href="img3.jpg" target="_blank"><img src="" width="300" /></a></div>
   <div class="pic"><a href="img4.jpg" target="_blank"><img src="" height="300" /></a></div>
</div>

NB : l'attribut scr de la balise img contient bien img1.jpg, img2.jpg, etc. mais n'est pas ici affiché. (Pourquoi ?)

Le CSS correspondant :

#pics {
    display: table-cell;
    vertical-align: middle;
}
#pics .pic {
    width: 300px;
    height: 300px;
    border: 1px solid #808080;
    background-color: #FFE0E0;
    text-align: center;
    vertical-align: middle;
    float: left;
    margin: 5px;
}

J'ai bien essayé de rajouter une fonction PHP qui calcule le pourcentage de réduction utilisé pour ramener la largeur à 300, histoire de calculer la nouvelle hauteur pour appliquer un style sur la photo elle même :
-- margin-top: (300 - nouvelle hauteur)/2
-- position relative et absolute et avec un top de ce calcul
Je n'y arrive pas.

La fonction PHP :

function top($l,$h) {
    $pc = 30000/$l;       // Pourcentage de réduction
    $nh = ($h * $pc)/100; // Nouvelle hauteur
    return (300-$nh)/2;
}

Du coup, je l'ai enlevée puisque ça ne changeait rien.

Quelqu'un a-t-il une idée des styles à appliquer (ou autre solution) pour centrer verticalement une photo en mode paysage dans sa DIV ?

Merci pour votre aide.

Windows / Firefox 102.0