弹性框：对齐自：中心不适用于位置：固定在火狐中

Question

我有一个问题，即在Firefox中与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

由于您使用的是position: fixed，因此并非真正期望flex容器的样式会影响.contact-icons定位。

与整个页面相关的水平居中：

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

Answer 2

也许可以为firefox使用特别的for for firfox'位置：粘性;"