如何在不使用translateX的情况下水平居中fixed定位的元素

以下方案均无需知道元素具体宽度，也不会和现有transform动画冲突，可适配你的使用场景：

方案1：左右定位+auto边距实现 #

直接修改你现有的.u-message样式即可：

.u-message {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    /* 其余原有样式保留即可 */
}

如果需要兼容旧版本浏览器，可以把width: fit-content替换为max-width: 适配的最大宽度值（比如max-width: 90vw）即可生效。如果元素自带内边距或边框，建议加上box-sizing: border-box避免宽度计算异常。

方案2：外层容器包裹实现 #

如果不想调整目标元素本身的样式逻辑，可以在外层新增一个固定定位的容器实现居中，完全不影响目标元素自身的transform动画：

<div class="u-message-wrapper">
  <div class="u-message">原有内容</div>
</div>

对应CSS样式：

/* 外层居中容器 */
.u-message-wrapper {
  position: fixed;
  left: 0;
  top: 0; /* 可自行调整为你需要的垂直位置 */
  width: 100vw;
  display: flex;
  justify-content: center;
  pointer-events: none; /* 避免外层容器遮挡页面其余元素的交互 */
}
/* 目标元素原有样式 */
.u-message {
  pointer-events: auto; /* 恢复目标元素自身的交互能力 */
  /* 其余原有样式全部保留，transform动画可正常使用 */
}

方案3：合并transform偏移实现 #

如果你只是需要保留translateX的动画效果，不需要完全禁用transform属性，可以直接把居中需要的偏移量合并到动画关键帧中：

.u-message {
    position: fixed;
    left: 50%;
    animation: 你的动画名称 动画时长 动画曲线 循环规则;
}
@keyframes 你的动画名称 {
  0% {
    transform: translateX(calc(-50% + 动画起始X偏移值));
  }
  100% {
    transform: translateX(calc(-50% + 动画结束X偏移值));
  }
}

内容的提问来源于stack exchange，提问作者peter roe