How to center an image in a div vertically?

Question

css

There is a function written in php that displays my product, but I can't get the image to be vertically centered inside the div.

<?php
function component($productimage,$productname,$producttext,$productdiscount,$productprice,$productid){
  $element = "
<div class=\"col-md-4 col-sm-6 my-3 my-md-0\">
  <form action=\"index.php\" method=\"post\">
    <div class=\"card shadow\">
      <a href='./index.php?product=$productid'>
      <div id=\"card-top\">
        <img src=\"$productimage\" alt=\"$productname\" class=\"img-fluid card-img-top\">
      </div>
      <div class=\"card-body\">
        <h5 class=\"card-title\">
          $productname
        </h5>
      </a>
        <h6>
          <i class=\"fas fa-star\"></i>
          <i class=\"fas fa-star\"></i>
          <i class=\"fas fa-star\"></i>
          <i class=\"fas fa-star\"></i>
          <i class=\"far fa-star\"></i>
        </h6>
        <p class=\"card-text\" id=\"description\">
          $producttext
        </p>";
        if($productprice==$productdiscount){
          $element.="<h5>
          <span class='price' id='disc'> $productprice P</span>
          </h5>";
        }
        else{
          $element.="<h5>
          <small><s class='text-secondary' id='nondisc'>$productdiscount</s></small>
          <span class='price' id='disc'> $productprice P</span>
          </h5>";
        }
        $element.="<button type='submit' class='btn btn-warning my-3' name='add'>Добавить в корзину</button>
      </div>
    </div>
  </form>
</div>";
echo $element;
}
?>

The CSS says:

#card-top{
    height:247px;
    text-align: center;
    justify-content: center;
}


.container .card #card-top img{
  height:auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
    background: radial-gradient(white 20%, #aafacf 80%);
    text-align: center;
    vertical-align: middle;
    margin: 0;
}

How to do it?