How should I center the fixed position element occupied by translateX？

Question

I want an HTML element centered horizontally, example:

.u-message {
    position fixed
    left 50%
    //transform: translateX(-50%); //but css animate occupy translateX, so i cant's use transform attribute,
    //margin-left: xxxpx;  //and I dont't sure how long of the HTML element width,so I cant's use it too.
}

What can I do ?

Answer 1

Try using flex box

.u-message {
  display: flex;
  align-items: center;
  justify-content: center;
}