本地运行内容居中，部署到gh-pages后svg按钮向左偏移如何解决

问题原因 #

1. 样式优先级/加载顺序异常 #

本地开发环境和gh-pages生产环境的CSS加载顺序不一致，你写的.button_container样式被更高优先级的全局样式（比如你用的UI库的Container默认样式）覆盖，导致flex布局不生效。

2. 静态资源路径错误 #

gh-pages部署后项目运行在二级路径下（格式为用户名.github.io/仓库名/），如果没有配置打包基准路径，会导致CSS文件加载失败/部分加载，布局样式失效。

3. 类名匹配失效 #

如果你项目开启了CSS Modules，生产环境类名会被哈希混淆，直接写字符串类名button_container会匹配不到对应样式。

排查步骤 #

• 打开gh-pages页面，按F12启动开发者工具，选中.button_container元素，检查样式面板中display: flex、justify-content: space-around属性是否存在、是否被划掉（被覆盖）。
• 切换到网络面板，过滤CSS资源，检查是否有404加载失败的样式文件。
• 对比本地和线上页面的.button_container盒模型参数，确认是否存在额外的padding、margin，或者容器宽度未占满父级。

解决方案 #

1. 修复样式优先级：调整自定义CSS的加载顺序，放在所有全局UI库样式之后加载，也可以临时加!important验证问题，调整后代码参考如下：

.button_container {
  display: flex !important;
  justify-content: center !important;
  gap: 6em; /* 替代space-around，布局更稳定，间距可按需调整 */
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 3em;
  padding: 0 !important;
}

2. 配置打包基准路径：
   • 如果是Vite项目，在vite.config.js中添加base: '/你的仓库名/'
   • 如果是Create React App项目，在package.json中添加字段"homepage": "https://你的用户名.github.io/你的仓库名/"
3. 确认类名引用：如果使用CSS Modules，要通过模块对象引用类名，比如className={styles.button_container}，不要直接写字符串类名。

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