设置top:0的fixed定位元素能否居中？是否需设置left值？

当元素设置position: fixed且top: 0时，完全可以实现水平居中对齐，而且根本不需要必须设置left属性。

核心实现逻辑 #

固定定位的元素并没有脱离常规的块级元素布局规则，只要给元素设置了明确的宽度（或者像示例里用width:100%+max-width组合限制宽度），就可以用margin: 0 auto这个经典的块级居中方式，让元素在视口中水平居中，同时保持top:0的固定定位效果。

示例代码验证 #

CSS 代码

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: yellow;
  max-width: 200px;
  margin: 0 auto;
}

HTML 代码

<header>
  <h1>Content</h1>
</header>

这段代码里，width:100%让元素默认占满视口宽度，max-width:200px限制了它的最大宽度，再配合margin:0 auto，就会自动分配左右外边距，让header固定在顶部的同时，始终保持水平居中。

其他可选的居中方式（非必要） #

如果你不确定元素的宽度，也可以用left属性配合transform实现居中：

header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: yellow;
}

但这只是另一种实现手段，绝非必须设置left才能让固定定位元素居中。

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