Html 如何在可滚动的容器中垂直居中css中的元素

我试图使用css将一个元素垂直居中于父元素内。父元素具有动态高度，如果父元素的高度小于子元素的高度，我希望父元素框滚动。我尝试使用flex-box和这里描述的transform:translate技术（）使子对象居中。这两种技术都有效，但当父对象太小时，会导致奇怪的滚动行为

#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
position: absolute;
}

.center {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

下面是一个JSFIDLE，它显示了我的意思：

请注意，如果向下缩放窗口直到滚动条出现，则子窗口顶部的文本“hello”将被截断，即使滚动到最顶部也是如此。如何使其能够在子元素的整个范围内滚动？

您可以将flexbox用于：

在通过和校准之前， 任何正的可用空间都将分配给该区域中的自动边距 维度

它之所以有效，是因为只分配了正的自由空间

#包装器{
显示器：flex；
}
.中心{
保证金：自动；
}

#包装器{
排名：0；
底部：0；
左：0；
右：0；
溢出：自动；
位置：绝对位置；
显示器：flex；
}
.中心{
宽度：300px；
高度：300px；
背景颜色：黄色；
保证金：自动；
}

你好

文本对齐：居中；把这个添加到你的css中，还是你想要一些更具体的东西？