Using css translate -50% to centre div doesn't apply to Firefox saved details pop-up

Question

I've used the following css to centre a div on screen (no fixed width or height so can't use defined pixel width and height and negative margins).

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

I've just realised that when you have saved your details for a form in Firefox, and then try to fill in the form within my div, the pop-up Firefox creates that contains your saved details is ignoring the transform, and appearing in the location on screen where the entire div would be if transform: translate wasn't applied.

It's difficult to give an example of this because it requires you to have saved your login details to a site, but if you go to a site where you have saved details, and move the container using transform: translate, you'll see the effect.

Is there a way of forcing Firefox's pop-up to take on the transform? Or will I need to find a different way of centring my div onscreen?

Answer 1

Your CSS should be right, but the position should be fixed on your parent div

w3schools: position: absolute The element is positioned relative to its first positioned (not static) ancestor element

.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

What kind of browser support do you need? you can solve this with flexbox!

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