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

Question

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

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

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

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

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

Answer 1

你的CSS应该是正确的,但是应该在你的父div上固定位置

w3schools:position:absolute元素相对于其第一个定位(非静态)祖先元素定位

.parent{
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%; 
    width: 100px;
    height: 100px; 
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

<div class="parent">
    <div class="child"></div>
</div>

Answer 2

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

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