响应式网页移动端文本无法居中，附CSS与HTML代码求排查

问题原因 #

你的样式出现了优先级冲突，打乱了原本的居中逻辑：

• 你在HTML头部的内嵌<style>标签里给.text-box加了margin: 20px属性，内嵌样式优先级高于外部style.css文件的样式，直接覆盖了外部的定位规则。
• 原本外部CSS中.text-box靠position: absolute+left: 50%+transform: translate(-50%, -50%)实现水平居中，加了左右各20px的外边距之后，元素实际宽度变成90% + 40px，在移动端窄视口下会溢出左侧视口，视觉上就会出现内容整体偏右、没有完全居中的情况。

修复方案 #

直接删除HTML头部内嵌样式里.text-box的margin: 20px属性即可，保留padding: 20px不会影响居中定位，也能满足你给文本加内边距的需求。

如果需要保留外边距，也可以直接修改内嵌样式补充定位规则，覆盖冲突属性：

.text-box{
  background-color: transparent;
  color: #FFF;
  padding: 20px;
  /* 补充以下规则确保定位生效 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
}

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