text-align:center失效文本靠右，如何实现h1在页面精准居中？

问题排查&修复方案 #

现有代码的错误点 #

• 语法错误：font-size; 10em; 属性名和值的分隔符错误使用了分号，应该为冒号，该错误会导致后续CSS属性解析异常。
• 无效属性：padding: 0 auto 不生效，padding不支持auto取值，该属性可直接删除。
• 定位属性冲突：绝对定位下同时设置了top:50%、bottom:50%、left:50%、right:50%，会强制压缩元素宽高，导致偏移逻辑异常，仅保留top:50%和left:50%即可满足居中的定位前置条件。
• 多余属性：绝对定位场景下margin: 0 auto不会生效，可直接删除。

修复后代码 #

body {
  padding: 0;
  margin: 0;
  background: #ffd200;
}

h1 {
  font-size: 10em;
  text-align: center;
  font-family: 'arial';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 如果你需要text-align对更宽的容器生效，可额外加宽度设置，比如width: 100% */
}

<h1>hello</h1>

补充说明 #

你原来的text-align: center本身逻辑是对的，之前不生效是因为上述错误导致元素本身宽度异常，元素宽度和内容宽度一致时看不出文本居中的效果，如果你需要在h1宽度更大的场景下让文本居中，保留该属性即可。

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