Как отцентрировать один элемент относительно другого?

Question

[Ratibor]

Доброе время суток! Подскажите возможно сделать такое или нет, на html и css, изначально элемент-ребенок находится по середине по высоте относительно элемента родителя, сколько контента внутри ребенка может быть не известно, но начальное положение такое, затем при определенном действии, например нажатии кнопки, в элемент ребенка добавляется еще контент, но при этом элемент-ребенок должен уже не посередине выравниваться, а расти вниз. Как это можно реализовать? Сейчас у меня как то так https://codepen.io/RatiboR1978/pen/oJMejL он постоянно по середине.

Если jquery использовать то как то так получается https://codepen.io/RatiboR1978/pen/KbBvqE а без jquery возможно так сделать?

Answer 1

[Юпитер Макс]

у child уберите top в процентах и transform сделайте по оси y

top: 0;
transformY: translate(-50%);

ну а дальше уже поиграйте со значениями для остальных элементов