使用css翻译-50%到中心div donds'；t应用于Firefox保存的详细信息弹出窗口

我使用了下面的css在屏幕上居中放置一个div（没有固定的宽度或高度，所以不能使用定义的像素宽度和高度以及负边距）

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

很难给出这样的示例，因为它要求您将登录详细信息保存到站点，但是如果您转到保存了详细信息的站点，并使用transform:translate移动容器，您将看到效果

---

有没有办法强迫Firefox的弹出窗口进行转换？或者，我需要找到一种不同的方式在屏幕上居中显示我的div吗？

您需要哪种浏览器支持？你可以用flexbox解决这个问题

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

---

尝试此操作以使div在页面上居中。这是一种更优雅的方法

.center{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
height:some-height;
width:some-width;
}

---

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

W3：元素相对于其第一个定位的（非静态）祖先元素进行定位

.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>

.parent{
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
.孩子{
位置：绝对位置；
最高：50%；
左：50%；
宽度：100px；
高度：100px；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

您还可以共享页面html，或者如果可能，也可以使用链接。这还不足以理解这个问题。现在可能是

-moz转换：translate（-50%，-50%）将帮助：）我已经尝试过：）。我无法共享该链接，但请尝试在Firefox中保存登录详细信息的任何站点上的inspect元素中进行编辑。Transform从元素本身计算百分比，边距指容器元素，因此它不会居中。如果没有办法，我可能需要使用javascript来计算所需的负边距。不管怎样，谢谢你。你完全正确，我的错。我对答案进行了编辑，为您提供了另一种选择。我确实需要它向后兼容，但将添加其他内容，使其在IE9及以下版本中降级。谢谢我没有定义宽度和高度，因为有几个div使用相同的样式，大小不同，所以不能使用这种方法。如果您展示JSFIDLE演示，它将非常有用。这样我就可以在本地查看了。
.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>