html - 另一个 div 内的 CSS 垂直对齐图像(Divi wordpress 主题)

Question

我试图在 div 中将我的图像垂直居中。我有一组不同高度和宽度的图像。我制作了一个 320x230 的盒子，在其中显示图像。较大的图像溢出:隐藏。但是一些较小的图像有间隙，所以我想将它们放在这个网站的中心 ---> Here

我将此 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;
}

这在 Divi wordpress 主题上对我有用。