html - 在精确的中心实现位置粘性内容？

Question

这是一个粘性的跨度，我试图将它准确地放在文档的中心，但我不想给出 margin-left 或 left，因为它没有给出文档的确切中心。

那么有什么办法可以得到位置粘性的精确中心？

.sticky {
  position: sticky;
  top: 0;
  background-color: yellow;
  font-size: 20px;
  left: 50%;
}
p{
  height:500px;
}

<h2>Sticky Element</h2>
<span class="sticky">I am from sticky</span>
<p>Some example text..</p>

Answer 1

使用 display: inline-block ( ? ) 和 transform: translateX(-50%) 使元素水平居中。

.sticky {
  position: sticky;
  top: 0;
  background-color: yellow;
  font-size: 20px;
  left: 50%;
  display: inline-block;
  transform: translateX(-50%);
}
p {
  height:500px;
}

<h2>Sticky Element</h2>
<span class="sticky">I am from sticky</span>

<p>Some example text..</p>