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

Question

我花了几天时间尝试垂直对齐

.sl_container

。
我已经尝试过

vertical-align: middle

，但不起作用。

如果我指定

.slideshow

的高度和宽度，然后使用

top: 50%;

和

transform: translateY(-50%);

，就可以了。 看这里。
问题是，如果我删除滑块的高度和宽度以占用可用空间并进行调整，那么这将使内部 div 看起来向上移动。 看这里。

display: table-cell;

不是一个选项，因为它的箭头位于父 div 整个宽度的两侧，而不是在图像上。

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

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

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

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

---

仅供参考：DIV 或图像向底部扩展 1-2 像素会产生出血效果，这就是为什么我将每个 DIV 着色以查看是否可以修复它。我确信这很愚蠢，如果你知道那是什么，请说出来。这并不重要，所以我不太关心。 xD

Answer 1

使用

slideshow

将其添加到您的

flexbox

元素中。 Flex 需要为 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;
}

看一下 -> 这里

Answer 3

您可以使用 Flexbox 或 Grid 垂直对齐容器的元素。但如果您不想使用 Flexbox 或网格，而只需要垂直对齐，则可以使用

align-content

属性。它不仅适用于 Flexbox 和 Grid，也适用于块级元素。 mdn链接

CSS 的align-content 属性设置内容项之间和周围沿弹性盒横轴、网格或块级元素的块轴的空间分布。

因此，您可以使用一行代码将块级容器的

elements

居中：

.slideshow {
   border: 3px solid black;
   height: 400px;

   align-content: center;
}

.slides{
  height: 100px;
  background: orange;
  text-align:center;
}

<div class='slideshow'>
  <div class='slides'>
   slides
  </div>
</div>