Question

这是一个粘滞的跨度，我试图将其准确地放置在文档的中心，但是我不想在左边距或左边距处添加空白，因为它没有给出文档的确切中心。

那么，有什么方法可以使位置保持不变的精确中心。？

.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>

Answer 2

尝试使用display：table属性：

.sticky {
    position: sticky; 
    top: 0;
    background-color: yellow;
    font-size: 20px;
    display: table;
    text-align: center;
    margin: auto;
}

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

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

在准确的中心位置获得粘性内容？

2 个答案: