与背景颜色垂直的元素对齐父母的中部

Question

我正在努力实现这一目标＆＃34;愚蠢的＆＃34;事情，但我无法找到解决方案。 我有一定数量的图像一个在另一个上面，我会尝试将背景颜色垂直对齐在第一个和最后一个图像的中间。 理解起来更难以解释，我做了一个解释性的图像，所以我觉得它更容易理解

我尝试制作代码，但没有成功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创建一个dinamic背景，或者只添加一定数量的已知高度的图像。我猜你正在创建一个静态页面，所以用

设置div

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

以及您已经设定的内容。 如果您有宽度问题，min-width和max-width是有用的属性。

在我看来它有效。如果有用，请评论问题并评价为正面

Answer 2

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

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

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

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

对于imgs的水平居中，请使用

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