CSS设置text-align:center后标题未居中，请求代码排查

你遇到的问题并不是text-align:center本身失效了，而是.home-about-textbox的宽度和偏移设置导致标题的视觉位置不符合预期。咱们一步步拆解：

核心问题点 #

• width: 100vw的副作用：vw单位基于视口宽度，当页面存在垂直滚动条时，100vw会包含滚动条的宽度，这会让文本框比可视区域宽，出现横向滚动条，导致标题在文本框内实际是居中的，但视觉上相对于页面可视区域偏左。
• 偏移量的近似值误差：你的.container宽度是95%，要让文本框左右均匀超出父容器，正确的偏移量应该是-2.5%（计算方式：(100% - 95%)/2 = 2.5%），你用的-2.65%是近似值，会让文本框整体轻微偏移，进一步加剧标题看起来没对齐的问题。

解决方案一：让文本框完美铺满视口且无滚动条 #

修改.home-about-textbox的CSS，用calc()精确计算宽度和偏移量，避免滚动条和偏移误差：

.container {
  width: 95%;
  margin: 0 auto;
}
.home-about-textbox {
  background-color: #232323;
  padding: 4em;
  /* 计算宽度：视口宽度 - 父容器左右留白的总宽度 */
  width: calc(100vw - (100% - 95%));
  /* 计算偏移量：让文本框向左偏移父容器留白的一半，实现左右对称超出 */
  margin-left: calc(-(100vw - 100%)/2);
  outline: 2px solid #00ff6c;
  outline-offset: -2.5em;
  color: #FFF;
}
.home-about-textbox h1 {
  text-align: center;
  color: #00ff6c;
}

调整后，文本框会正好铺满整个视口，没有横向滚动条，标题不仅在文本框内居中，视觉上也会对齐页面中心位置。

解决方案二：如果不需要文本框超出父容器 #

如果你原本就希望文本框限制在.container的95%宽度内，直接移除width:100vw和margin-left:-2.65%即可，标题会自然在文本框内居中：

.container {
  width: 95%;
  margin: 0 auto;
}
.home-about-textbox {
  background-color: #232323;
  padding: 4em;
  outline: 2px solid #00ff6c;
  outline-offset: -2.5em;
  color: #FFF;
}
.home-about-textbox h1 {
  text-align: center;
  color: #00ff6c;
}

验证说明 #

你可以检查一下：原本的text-align:center是有效的，只是文本框的尺寸和位置问题让你产生了“标题没居中”的错觉。调整后无论是哪种方案，标题都会按照预期在文本框内居中显示。

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