title: Using css translate -50% to centre div doesn't apply to Firefox saved details pop-up
body: <p>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).</p>
  
  <pre><code>position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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?</p>