Html 不设置高度的绝对中心内容

.parent{
背景颜色：金色；
高度：400px；
位置：相对位置；
}
.孩子{
位置：绝对位置；
最高：50%；
左：50%；
填充物：8em 1.2em；
颜色：白色；
背景色：深黄色；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

希洛
你好

如果没有高度，您无法绝对化

内容，您必须将父div height设置为100%或您需要的某个高度值，现在我只需删除
transform属性
，并使用
calc（）


.parent{
背景颜色：金色；
高度：400px；
位置：相对位置；
}
.孩子{
位置：绝对位置；
顶部：钙（50%-65px）；
左：0；
右：0；
宽度：100px；
文本对齐：居中；
保证金：0自动；
填充物：8em 1.2em；
颜色：白色；
背景色：深黄色；
}

希洛
你好
您也可以使用flex-box样式来实现这一点（下面是jsFiddle）。如果需要，您可以将高度值更改为百分比（我不确定您是否希望这样做）


.parent{
背景颜色：金色；
高度：400px；
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.孩子{
宽度：100px；
文本对齐：居中；
保证金：0自动；
填充物：8em 1.2em；
颜色：白色；
背景色：深黄色；
}

希洛
你好
您将始终需要为父级设置一个高度，否则
top:50%
？hmmm的值是多少？当我将高度设置为100%时，它将采用其中内容的高度。有没有一种方法可以让它达到“组”分区的高度，从而使它具有响应性（如视频）