Flexbox：对齐自我：中心不适用于位置：在Firefox中修复

Question

我在 Firefox 中将 div 与 flexbox 水平对齐时遇到了问题。它在 Chrome 中运行良好。

这是代码：

<header id="header">
    <p class="small-hidden">I am</p>
    <h1>Håkan</h1>
    <p>web designer from Sweden, living in the Basque Country, Spain</p>
    <div class="contact-icons">
        <a href="#.com"><i class="mi mi-Mail"></i></a>
        <a href="#"><i class="mi mi-whatsapp"></i></a>
        <a href="#contact"><i class="mi mi-PenPalette"></i></a>
    </div>
</header>    
 --------------------------------------------------------------------------

header {
  background-image: url(../img/hakan_mobile.jpg);
  background-size: cover;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content:  flex-end;
  align-items: center;
  color: #777;
  }
@media only screen and (min-width: 40em) {
  header {
    background-image: url(../img/hakan.jpg);
    height: 100vh;
    width: 40vw;
    position: fixed;
    background-position: center;
    justify-content: center;
    }
  }
.contact-icons {
  position: fixed;
  top: 0;
  }
@media only screen and (min-width: 40em) {
  .contact-icons {
    bottom: 2rem;
    top: inherit;
    }
  }

我要做的是将文本（p + h1 + p）放在标题的下部，并且链接应该在小屏幕上居中并固定在屏幕顶部，并在底部居中更大的屏幕。但是，如果我使用position: fixed（在移动设备上向下滚动时需要保持链接在屏幕顶部可见），.contact-icons 将不会水平居中。如果我删除position: fixed，它会起作用。

我在容器上尝试了align-items: center，在.contact-icons 上尝试了align-self: center，但结果相同。

在 Chrome 中完美运行，但我无法在 Firefox 中运行。有什么建议吗？

小提琴：https://jsfiddle.net/1qrqxd7m/

在小提琴上它看起来几乎居中，但仍然不是。在我的工作副本上，它看起来更加偏离中心。

Answer 1

也许对 Firefox 使用“position:sticky;”进行特殊尝试

Answer 2

由于您使用的是position: fixed，因此预计 flex 容器的样式不会影响 .contact-icons 的定位。

只需将它们相对于整个页面水平居中：

position: fixed
left: 50%
transform: translateX(-50%)