绝对定位在父级容器竖向居中

需要完成的效果如图

子容器如果不使用绝对定位的话，会被父容器挤到页面下边去，
其次，我的需求是子容器显示在如图所示的位置，
重点：子容器的高度不固定，他的内容是从后端获取的数据，数据越多height就会越大

实现代码如下，详细解释见注释

/* 子容器的样式 */
.homepage-layered-bt-container{
  display: flex; /* flex布局 */
  flex-direction: column; /* 子容器的内容竖向排列 */
  justify-content:center;  /* 对齐方式--居中 */ 
  position: absolute; /* 绝对定位 */
  right: 24px; /* 我的需求没有横向居中，所以与右侧的距离设置为一个固定距离 */
   /* 注意！！！重点！！！ 这里是计算父容器高度的50%，top设置为这个值，就是将子容器的顶端放在父容器一半的位置，此时位置会偏下 */
  top: calc(50%); 
  /*  注意！！！重点！！！ 这里在计算子容器自身高度的一半，-50%表示上移自身的50%，这时子容器就可以处于父容器的中间了 */
  /* 括号内第一个是x轴偏移，我的需求不需要横向居中，所以设置为0%；第二个是y轴偏移 */
  transform: translate(0%,-50%);
}