Span标签内文本无法按要求居中，长文本多设备响应式居中如何实现？

问题原因 #

你之前的方案不生效的核心原因：

• span是行内元素，默认margin: auto不会生效，且行内元素的对齐依赖父级文本对齐规则
• 两个span是交替显示的动态元素，没有做重叠定位的话，两个元素会上下排布，导致高度异常、对齐错乱
• 之前的.animated类固定了高度，长文本换行后容易溢出，也会影响对齐效果

最终解决方案 #

1. 替换你现有的CSS代码即可 #

.animated {
  font-size: 40px;
  color: #d1d8e0;
  margin-top: 20px;
  font-weight: 900;
  /* 把固定高度改为最小高度适配不同长度内容 */
  min-height: 60px;
  line-height: 50px;
  /* 新增对齐相关规则 */
  width: 100%;
  text-align: center;
  position: relative;
}

.animated span {
  opacity: 1;
  transition: all 0.5s;
  /* 新增规则：让两个交替显示的span重叠在同一位置，内容自动居中 */
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.animated>.fade {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 800px) {
  .animated {
    min-height: 70px;
    font-size: 25px;
    line-height: 35px;
  }
}

2. 其他代码无需改动 #

HTML结构、JS动画逻辑都保持你现有写法即可，修改后所有文本不管是短姓名还是换行的长描述，都会自动水平居中，动画切换时也不会出现位置跳动，全设备都能自适应展示。

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