Элемент с цветом фона по вертикали выровнен по середине родителя

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 
} 

Что касается центрирования по горизонтали ГИМ, использовать

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