Javascript 旋转木马中不同大小的图像以垂直居中方式显示

我创建了一个带有外部DIV的简单旋转木马，其宽度和高度设置为600 X 800，位置设置为“位置：相对”，该DIV内的图像为“位置：绝对”，顶部和左侧为零。我还保留了一个“left/right”按钮，这样每当我单击left/right按钮时，图像就会使用JQuery相应地向左/向右移动。这一切都很好，包括响应。 但我有一个问题，当我有不同大小的图像，我想显示在水平和垂直中心（“垂直对齐：中间”）。我尝试了不同的CSS方式，但似乎没有运气。我知道我可以用JavaScript来做，但是想知道是否有人能帮我只用CSS，非常感谢。。。如果可能的话，我想避免使用JavaScript。 请注意，此旋转木马一次显示一个图像。这就是我设计/编程的方式

这是我现在的代码：

<div style="position:relative;">
   
    // image style is set to position:absolute;left:0;top:0
    //  _______________________________________
    //  |           |          |               |
    //  |           |          |_______________|
    //  |           |          |               
    //  |___________|          | 
    //              |__________|
    //

</div>

//图像样式设置为位置：绝对；左：0；排名：0
//  _______________________________________
//  |           |          |               |
//  |           |          |_______________|
//  |           |          |               
//  |___________|          | 
//              |__________|
//

我希望它是这样的：

<div>
   
    //              ___________
    //  ____________|          |
    //  |           |          |_______________
    //  |           |          |               |
    //  |           |          |_______________|
    //  |___________|          | 
    //              |__________|

</div>

//              ___________
//  ____________|          |
//  |           |          |_______________
//  |           |          |               |
//  |           |          |_______________|
//  |___________|          | 
//              |__________|

---

谢谢。

您可以在您的容器分区上使用flexbox

div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

---

谢谢bendelszl，但是当点击下一步按钮时，下一个图像在DIV的右侧闪烁。这不到一秒钟，但是看起来不太好。再次感谢。如果还没有添加，我建议您可以添加过渡以使其平滑。闪烁可能是因为您使用的“左”或“平移”值发生了更改。