Как поставить картинку в div по центру вертикально?

Question

[SinSin35]

Есть функция написанная в php выводящая мой продукт, однако никак не получается поставить картинку по вертикальному центру внутри 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;
}
?>

В CSS прописано:

#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;
}

Как это сделать?