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

Question

I am trying to achieve this "stupid" thing, but I can't find a solution. I have a certain number of images one above the other, I would try to put background-color which is aligned vertically in the middle of the first and last image. more difficult to explain than to understand, I made an image explanatory so I think it is more easy to understand

I tried to make a codepen, but without success 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;
}

do you have any advice or suggestion?

Answer 1

Well, I'm not sure I've understood but how you started isn't correct: you want your images at the center of the page, right? Well, to do that they must be positionated with

position: relative;
left:50%;

Then, you created a div as a background. There you can choose: you can create a dinamic background with JS, or add only a certain number of images with a certain known height. I guess you are creating a static page, so set the div with

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

and with what you have already set. If you have width problems, min-width and max-width are useful attributes.

In my mind it works. Please comment for issues and rate positive if useful

Answer 2

You can't set the parent's height according to an absolutely positioned element. So you have to use fixed lengths rather than percentages.

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

Then, for the background color to align to the center of the first image, add this:

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

As for horizontally centering the imgs, use

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