DIV 在另一个 DIV 中的垂直对齐

Question

几天来我一直在尝试垂直对齐 .sl_container。
我已经试过了 vertical-align: middle，但那行不通。

如果我为 .slideshow 指定了高度和宽度，那么使用 top: 50%; 和 transform: translateY(-50%); 就可以了。 See here。
问题是，如果我删除滑块的高度和宽度以占用可用的 space 并进行调整，那么这将使内部 div 看起来向上移动。 See here.

display: table-cell; 不是一个选项，因为它会使箭头位于父级 div 的整个宽度的两侧，而不是在图像上。

我之前尝试过 flex，它会垂直对齐，但是如果父 DIV 宽度大于子 DIV，由于某种原因它会变为

正如我所说，我尝试了多种方法，但没有一种方法可以在不破坏箭头位置的情况下完成。

到目前为止我所做的：JSFiddle
前面提到的设置在 CSS 部分被注释掉。

对此的任何见解都将有助于找到一种方法或如何在不破坏整个幻灯片和箭头的情况下使其对齐。

仅供参考：DIV 或图像向底部扩展 1-2px 会产生渗色效果，因此我将每个 DIV 着色以查看是否可以修复它.我敢肯定它有点傻，如果你知道它是什么，请说出来。这并不重要，所以我不太关心。 xD

Answer 1

将此添加到您的 slideshow 元素，使用 flexbox。 Flex Needs prefixing for IE11 (caniuse)

.slideshow {
    display: flex;
    align-items: center;
}

编辑：我在您的 jsFiddle 中启用了注释的高度和宽度样式，但是此方法将垂直对齐 slideshow 子项，而不考虑宽度和高度。

Answer 2

尝试使用 flexbox，它是垂直对齐最优雅的解决方案

例如

<div class='parentDiv'>
  <div class='childDiv'>
  </div>
</div>

.parentDiv {
   display: flex;
   align-items: center;
   justify-content: center;
}

看看 -> here

DIV 在另一个 DIV 中的垂直对齐

Vertical alignment of a DIV inside another DIV

css

vertical-alignment