Question

因此，我正在建立一个站点，其中包含几个全屏纯色背景部分，其中一些文本位于部分中间。我在用作容器的部分上使用display: flex，因为然后可以在子文章上使用margin: auto来使元素居中。但是，我在屏幕顶部还有一个固定的标题导航，我想偏移锚点链接，以便在单击锚点链接时，标题的底部与节的顶部对齐上。我看到人们偏移锚链接的方式是在本节中使用隐藏的：before伪元素。 但是问题来了，，在本节中使用display: flex时，它会“忽略”：before元素。与在使用display: block时相反，它会“识别”：before元素，并且会正确偏移，但是随后margin: auto在child上不会垂直居中。

我有一个烦人的难题，即锚链接将正确偏移，但文章没有居中，或文章完全居中，但锚链接偏移错误。

我已经尝试过使用top和transform垂直将文章居中，但是由于：before在那儿，我无法以某种方式使其完美居中。

我制作了一个演示该问题的示例。

nav {
  opacity: 0.7;
  display: inline-block;
  position: fixed;
  height: 50px;
  width: 100%;
  background-color: cyan;
}

article {
  margin: auto;
}

section {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow:column;
}

section::before {
  display: block;
  content: " ";
  margin-top: -50px;
  height: 50px;
  
  /* visibility: hidden; */
  pointer-events: none;
  border: 1px solid red;
}

#two {
  color: white;
  background-color: black;
}

<nav>
  <a href="#one">Go to One</a>
  <br>
  <a href="#two">Go to Two</a>
</nav>

<section id="one">
  <article>I am One</article>
</section>

<section id="two">
  <article>I am Two</article>
</section>

https://jsfiddle.net/Nermin99/8np7jmdb/14/

TL; DR

（请参见代码段）我不需要锚定链接来为我的固定标题进行偏移量调整，同时仍将内容放在各节的中心。

在保持网站垂直居中的同时偏移html锚点

TL; DR

0 个答案: