CSS вертикальное выравнивание изображения внутри другого div (тема WordPress Divi)

Question

Я пытаюсь отцентрировать свое изображение по вертикали внутри div. У меня есть набор изображений разной высоты и ширины. Я сделал коробки 320x230, которые отображают эти изображения внутри них. Изображения большего размера имеют переполнение: скрыто. Но некоторые изображения меньшего размера имеют пробел, поэтому я хочу расположить их по центру на этом сайте --- > Здесь

Я использую этот CSS для DIV, который содержит изображение

.transformations {

max-width:320px;
max-height: 230px;
min-width:320px;
min-height: 230px;
box-shadow: 0 0 50px #0052af;
overflow: hidden;
border: 4px solid #0052af;
}

Answer 1

Я только что сделал некоторые настройки, и это работает:

<div class="img-wrapper">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>

И CSS:

.img-wrapper{
  position: relative;
  overflow:hidden;
  height:425px;
}

.img-wrapper img{
   position: absolute;
   top:-100%; left:0; right: 0; bottom:-100%;
   margin: auto;
}

Это сработало для меня на тему WordPress Divi.