如何实现宽度70%的fixed居中导航栏 设置position: fixed后左移怎么办

问题原因 #

当元素设置position: fixed后会脱离正常文档流，此时原本基于文档流生效的margin: 0 auto居中规则会失效，元素默认会以视口左上角为原点进行定位，所以会出现偏移到左侧的问题。

解决方案 #

这里提供两种常用的兼容方案，你可以根据需求选择：

方案1：left + transform 实现居中 #

修改.navbar的CSS规则如下：

.navbar {
  position: fixed;
  background: #1a1c1b;
  padding: 5px 0;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  /* 可选：固定在页面顶部 */
  top: 0;
}

原理是先让导航栏左边缘对齐视口水平中点，再向左偏移自身宽度的50%，实现精准居中，兼容性好，几乎支持所有现代浏览器。

方案2：左右定位+margin:auto实现居中 #

也可以通过同时设置左右定位为0，触发margin:auto的居中规则：

.navbar {
  position: fixed;
  background: #1a1c1b;
  padding: 5px 0;
  width: 70%;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* 可选：固定在页面顶部 */
  top: 0;
}

额外注意事项 #

因为fixed定位的元素不占据文档流高度，会遮挡页面后续的内容，建议给body或者<main>标签添加上内边距，数值和导航栏的实际高度一致即可，避免内容被导航栏遮挡：

body {
  background-color: black;
  /* 数值根据导航栏实际高度调整即可 */
  padding-top: 60px;
}

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