为什么调整到移动端视口时元素设置的右侧margin未生效？

你的布局问题核心出在绝对定位元素的宽度计算逻辑上：

• 绝对定位的.banner-text设置的width: 100%是相对于父容器.banner-container的宽度计算，值等于当前视口宽度
• 额外设置的margin: 0 10px会让元素的总占位宽度变为100% + 20px，超出父容器宽度
• 配合left: 50% + transform: translateX(-50%)的居中规则，元素整体会向左偏移自身宽度的一半，最终左边缘超出视口10px，右边缘超出视口10px。因此左侧的margin看起来是生效状态（实际是元素左半部分超出视口产生的留白），右侧margin在视口外不可见，就出现了你看到的右侧margin不生效的现象。

方案1：使用calc动态计算宽度 #

直接修改.banner-text的宽度规则，抵消margin的宽度占用即可：

.banner-text {
  /* 其他原有规则保留 */
  width: calc(100% - 20px);
}

修改后元素总占位宽度刚好等于父容器宽度，左右margin都会正常显示。

方案2：用绝对定位偏移属性替代margin #

这个方案不需要手动计算宽度，灵活度更高，修改后的.banner-text规则如下：

.banner-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 左右各留10px空白，宽度自动撑满中间区域 */
  left: 10px;
  right: 10px;
  max-width: 560px;
  /* 宽度小于父容器时自动水平居中 */
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 32px;
  padding: 24px 0;
}

可以删掉原有的width: 100%、left: 50%、transform: translate(-50%, -50%)和margin: 0 10px规则。

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