javascript - 具有背景颜色的元素在父元素的中间垂直对齐

Question

我正在努力实现这个“愚蠢”的事情，但我找不到解决方案。我有一定数量的图像，一个在另一个之上，我会尝试将垂直对齐的背景颜色放在第一张和最后一张图像的中间。解释比理解更难，我做了一个图像解释，所以我认为它更容易理解

我尝试制作一个codepen，但没有成功http://codepen.io/mp1985/pen/BoEMPN

.bg {
  background: red;
  top: 25%;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom:0;
  left: 0;
  right: 0;
  z-index: 100;
  backgrund-position: center center;
  z-index: 1;
}

您有什么意见或建议吗？

Answer 1

不能根据绝对定位的元素设置父级的高度。所以你必须使用固定长度而不是百分比。

.container {
  height: 900px; // img-height * 4
}

然后，为了让背景颜色与第一张图片的中心对齐，添加:

.bg {
  top: 150px; // img-height / 2
}

至于图像水平居中，使用

.box-images {
  left: 50%;
  margin-left: -300px; // img-width / 2
}