如何实现header内name文本在所有屏幕尺寸下居中且响应式显示

修复方案 #

你要实现name不受右侧TikTok图标显隐影响、始终居中的效果，只需要调整父容器和图标的布局规则即可：

第一步：给header父容器添加基础布局样式

.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

第二步：调整TikTok图标样式，避免占位影响居中

把图标改为绝对定位，完全脱离文档流，显隐都不会挤占中间文本的位置：

.social-icon-header {
  position: absolute;
  right: 16px; /* 可根据需求调整右侧边距 */
  display: none; /* 保留原有的小屏幕隐藏逻辑 */
}

第三步：简化name的样式（删除无效属性）

justify-content是flex容器的属性，写在子元素.name上不会生效，直接删掉即可：

.name {
  text-align: center;
  margin: 0; /* 可选，清除h2标签默认外边距避免错位 */
}

可选：大屏幕显示TikTok图标

如果需要在宽屏设备上显示图标，补充媒体查询即可：

/* 示例：屏幕宽度≥768px时显示图标 */
@media (min-width: 768px) {
  .social-icon-header {
    display: block;
  }
}

原理说明 #

之前的布局问题是因为图标默认处于文档流中，显示时会占用父容器宽度，挤压.name的可用空间，导致文本没法真正居中。改为绝对定位后图标不会占用容器空间，父容器设置justify-content: center后，.name会始终在容器水平居中位置，不受图标显隐影响。

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