Javascript 垂直居中、绝对定位的子项强制父项高度匹配

我希望在最小高度父div内有一个垂直居中的div。我使用以下代码垂直居中我的div：

.parent {
    width:100%;
    min-height: 25vh;
    max-height: auto;
    position: relative; /* so center-area can be positioned absolute */
    display: inline-block;
    background:lightblue;
}
center-area {/* let it fill the whole container */
    position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;
    display: inline-block;
}    
.center-area:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.centered {
    display: inline-block;
    vertical-align: middle;
    font-size:18px;
    background:green;
    margin:20px;
}

也许需要一些JS？我想让蓝色的，家长div的高度随着孩子的高度移动

我意识到问题在于子分区的位置是绝对的，因此我可以垂直对齐它，但是当内容大于父分区的高度允许时，我希望父分区向下延伸页面以适应。。。我希望这是有道理的

这是我的JSFIDLE：

---

提前感谢您的建议

您是否尝试过将

显示：表格单元格

用于

。父项

，将

垂直对齐：中间

用于

。居中

，删除

。中心区域

$（'.addContent'）。单击(
功能（el）{
$（el.target.parentElement）.append（Lorem ipsum door sit amet，concetetur adipiscing elite.Nam consequat quam bibendum nibh cursus viverra.Duis suscipit bibendum faucibus.Present sit sapien，ut dignessim augue.Aliquam sollicitudin nis a nunc lobortis mollis.Phasellus vitae dol ac orci ac portitor lacinia at auge.dui eros，sodales ac gradida at，adipi在《泰勒斯·普鲁斯》中，维尼那提斯岛上的权杖是一座巨大的城堡。在《埃格特》中，它是一座巨大的城堡。在《猫科动物湖》中，它是一座巨大的城堡。
”；
}
)；

.parent{
宽度：100%；
最小高度：25vh；
最大高度：自动；
位置：相对；/*因此中心区域可以定位为绝对位置*/
显示：表格单元格；
背景：浅蓝色；
}
.居中{
垂直对齐：中间对齐；
字号：18px；
背景：绿色；
利润率：20px；
}

添加内容此内容垂直居中于本分区内。Lorem ipsum dolor sit amet，Concetetur adipiscing Elite.Nam consequat bibendum nibh cursus viverra.Duis Suscitit bibendum faucibus.Praesent sit amet sapien，ut Dignessim augue

您可以将

.parent

背景设置为
透明
，将
.centered
的
边框
属性设置为
50px/*或其他值，例如75px、100px*/实心浅蓝色

html,
body {
  font-family: Helvetica, Arial, Sans-Serif;
  padding: 0px;
  margin: 0px;
}

.parent {
  width: 100%;
  min-height: 25vh;
  max-height: auto;
  position: relative;
  /* so center-area can be positioned absolute */
  display: inline-block;
  background: transparent;
}

center-area {
  /* let it fill the whole container */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: inline-block;
}

.center-area:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.centered {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  background: green;
  z-Index: 1;
  border: 50px solid lightblue;
}

.clear_both {
  clear: both;
}


$（'.addContent'）。单击(
功能（el）{
$（el.target.parentElement）.append（Lorem ipsum door sit amet，concetetur adipiscing elite.Nam consequat quam bibendum nibh cursus viverra.Duis suscipit bibendum faucibus.Present sit sapien，ut dignessim augue.Aliquam sollicitudin nis a nunc lobortis mollis.Phasellus vitae dol ac orci ac portitor lacinia at auge.dui eros，sodales ac gradida at，adipi在《泰勒斯·普鲁斯》中，维尼那提斯岛上的权杖是一座巨大的城堡。在《埃格特》中，它是一座巨大的城堡。在《猫科动物湖》中，它是一座巨大的城堡。
”；
}
)；
html，
身体{
字体系列：Helvetica、Arial、无衬线字体；
填充：0px；
边际：0px；
}
.家长{
宽度：100%；
最小高度：25vh；
最大高度：自动；
位置：相对位置；
/*所以中心区域可以绝对定位*/
显示：内联块；
背景：透明；
}
中心区{
/*让它装满整个容器*/
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
显示：内联块；
}
.中心区：前{
内容：''；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}
.居中{
显示：内联块；
垂直对齐：中间对齐；
字号：18px；
背景：绿色；
z指数：1；
边框：50px纯色浅蓝色；
}
.两清{
明确：两者皆有；
}


添加内容此内容垂直居中于该分区内。Lorem ipsum dolor sit amet，Concetetur adipiscing Elite.Nam Consequeat quam bibendum nibh cursus viverra.Duis suscipit bibendum faucibus.Praesent sit
阿梅特·莱克塔斯·萨皮恩，奥古斯的显贵

我想我自己通过一些研究已经找到了一个解决方案……我会测试它，并将其发布在这里，以防它对其他人有所帮助

我会回复你的！
欢迎使用SO！你能提供一张点击和未点击的图片吗？这必须用纯CSS完成吗？如果需要满足所有要求，我只能考虑使用javascript解决问题。
最小高度：25vh；
的
。父级
似乎被忽略了。我不认为你的解决方案是动态的解决方案：如果内容很小，那么一切都会发生变化。不完全正确…我希望原始容器垂直居中于一个更大的分区中…然后，如果添加内容，这意味着它最终会比父容器高，父容器“坏了”，使其位置变为静态或相对…因此，其高度将受其子分区的影响…不再是绝对位置。如果您在此处找到答案，请将其标记为已回答。