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

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

好吧，我不确定我是否了解，但是您的开始方式不正确：您希望图像位于页面中心，对吗？ 好吧，要做到这一点，他们必须与

position: relative;
left:50%;

然后，您创建了一个div作为背景。 您可以在其中选择：您可以使用JS创建动态背景，或仅添加一定数量的具有已知高度的图像。 我想您正在创建静态页面，因此将div设置为

position: relative;
min-height: 900px; //(imgNum-1)*imgHeight 
top: 150px; //imgHeight/2 

以及您已经设置的内容。 如果您遇到宽度问题，则最小宽度和最大宽度是有用的属性。

在我看来，它有效。 请对问题发表评论，并在有用时打分

Answer 2

您不能根据绝对定位的元素设置父母的身高。 因此，您必须使用固定长度而不是百分比。

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

然后，为了使背景颜色与第一张图像的中心对齐，请添加以下内容：

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

至于img的水平居中，请使用

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