Header文字在移动端小屏幕下无法居中问题求助

问题原因 #

你遇到的居中失效是两个核心问题导致的：

• 选择器权重不足：全局定义的.header .name是双类选择器，权重高于媒体查询里单独的.name选择器，所以小屏幕下position: absolute、left: 1em、margin-left: 4%这些原有属性仍然生效，你写的居中规则被覆盖
• 绝对定位元素的偏移没有重置：即使加了width和居中属性，原有左偏移属性依然存在，元素整体还是靠左侧显示，自然没法居中

修复方案 #

直接修改媒体查询内的header相关规则即可，参考代码如下：

/* Tablets and under */
@media (max-width: 768px) {
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    text-align: center;
  }

  /* Header */
  .social-icon-header {
    display: none;
  }

  /* 用和全局规则权重一致的选择器，才能覆盖原有属性 */
  .header .name {
    /* 重置原有左偏移属性 */
    left: 0;
    margin-left: 0;
    /* 占满全屏宽度，文本居中才能生效 */
    width: 100%;
    text-align: center;
  }
}

修改后所有小屏设备都可以正常居中，不需要额外做设备适配。

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