Sarah Sarah - 1 month ago 17
CSS Question

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

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

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;
}