使用css translate -50％到中心div不适用于Firefox保存的详细信息弹出窗口

我已经使用以下css将div放在屏幕中心(没有固定的宽度或高度,所以不能使用定义的像素宽度和高度以及负边距).

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

我刚刚意识到,当您在Firefox中保存表单的详细信息,然后尝试在我的div中填写表单时,弹出的Firefox会创建包含您保存的详细信息而忽略转换,并出现在屏幕上的位置,如果转换整个div将是：不应用translate.

很难给出一个例子,因为它要求您将登录详细信息保存到站点,但是如果您转到已保存详细信息的站点,并使用transform：translate移动容器,您将看到效果.

有没有办法迫使Firefox的弹出窗口进行转换？或者我是否需要找到一种不同的方法来将我的div放在屏幕上？

您需要什么样的浏览器支持？你可以用flexbox解决这个问题！

body (or container-div) {
  display: flex;
  align-items: center;
  justify-content: center;
}