CSS设置text-align:center后文本偏右未居中是什么原因

text-align: center本身没有失效，这个属性的作用范围是当前元素的内容区域，只会让元素内部的行内内容（比如文本、图片）在自身内容框里居中。你看到文本向右偏，核心是承载这段文本的<p class="NameOfMovie">元素本身的内容区没有和父级黑条容器.TopBorder的左右边缘对齐，常见触发场景：

• 你只重置了.NameOfMovie的上下外边距，没有覆盖浏览器默认给<p>、<body>等元素加的左右方向外边距、内边距。不同浏览器的默认用户代理样式存在差异，这类默认边距很容易造成视觉偏移。
• 存在其他优先级更高的CSS规则，给.NameOfMovie或者它的父元素加了左外边距/左内边距，或者修改了元素的display、宽度、定位、浮动属性，导致p元素没有撑满父容器宽度，文本在收缩后的p元素内部居中，看起来就是整体偏右。

1. 在CSS文件最开头加全局重置规则，清掉浏览器默认边距，统一盒模型计算规则，从根源避免默认样式干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 调整.NameOfMovie的样式，直接重置四个方向的外边距，补个宽度规则确保撑满父容器，如果需要文本在黑条里垂直居中，加个和父容器高度一致的行高即可：

.NameOfMovie {
  margin: 0;
  text-align: center;
  font-size: 30px;
  color: red;
  line-height: 50px;
  width: 100%;
}

3. 排查其余CSS代码，确认没有更高优先级的规则给相关元素加了左偏移属性、或者改了元素的定位/浮动/显示规则。

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