Html 翻译（-50%，-50%）和位置：不同浏览器上的相关问题

我有一个问题，试图将元素转换为-50%，-50%

我的代码如下所示，但在Firefox和Chrome中的执行方式不同。 Firefox呈现了我想要达到的效果（class.two元素的中心位置），但Chrome却失去了它

到目前为止，我发现可能是位置的情况：相对，但我需要它而不是绝对来计算元素相对于父元素的宽度和高度

body，html{
高度：100%；宽度：100%；
边距：0；填充：0；
}
.一{
背景：红色；
宽度：100%；
高度：100%；/*用于其他用途*/
最小高度：30%；
最大高度：50%；
}
.二{
背景：橙色；
显示：内联块；
身高：80%；
宽度：自动；最大宽度：90%；
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

基础知识

这里的问题是容器元素没有明确设置高度。确实，它设置了

min height

和

max height

，但没有设置height属性。（即使计算的高度是

最小高度的值

）

现在

top:50%

的意思是：“将元素向下移动容器高度的50%”，因此：

在Chrome中：

top:50%

将内部元素向下移动50%x0px（容器的设置高度）=0px，然后transform将其向上移动自身高度的一半

不过Firefox将top:50%解释为容器计算高度的50%

如果您在容器上设置了明确的高度，这在Chrome中也适用：

body，html{
高度：100%；宽度：100%；
边距：0；填充：0；
}
.一{
背景：红色；
宽度：100%；
高度：150px；/*用于其他用途*/
最小高度：30%；
最大高度：50%；
}
.二{
背景：橙色；
显示：内联块；
身高：80%；
宽度：80%；
最大宽度：90%；
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

基础知识

将

相对

更改为

绝对

@friedman为什么

高度：80%

设置为

两个

？谢谢你，杰瑞，但我需要相对的，如上所述。@kukkuz-我只需要这个元素是一个人高度的80%。谢谢你的回答！不幸的是，我需要按百分比而不是px来保持高度。您是否尝试过使用视口单位（vh）作为高度-也许这是可行的？