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

Question

我使用以下 css 在屏幕上居中 div(没有固定的宽度或高度，因此不能使用定义的像素宽度和高度以及负边距)。

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

我刚刚意识到，当您在 Firefox 中保存表单的详细信息，然后尝试在我的 div 中填写表单时，Firefox 创建的包含您保存的详细信息的弹出窗口将忽略转换，并出现在如果未应用转换，则整个 div 所在的屏幕位置:翻译。

很难举出一个例子，因为它要求您将登录详细信息保存到站点，但是如果您转到保存详细信息的站点，并使用 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>