How to horizontally center a fixed div with CSS, without transform

Question

This is the modern way to center an element of unknown width in the page:

div#prompt {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

However, in our specific case, the element will also have an animation that uses transform and translate. Basically the animation will conflict with the positioning, when they both use transform.

Is it possible to rewrite the above code and have a centered position in the page without using transform?

Answer

Yes, it is possible to horizontally center a fixed div in the page using this simple code:

div#prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin 0 auto;
}

The relevant parts are:

• the margin left and margin right set to auto

• the left and right positions both set to 0.

This strategy works on all major browser (tested on Chrome, Firefox and Safari).