html - translateX占用的固定位置元素应该如何居中？

Question

我想要一个水平居中的 HTML 元素，例如：

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

我能做些什么 ？

标签： htmlcsscenterfixed

Answer 1

尝试使用弹性盒子

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