フレックスボックス：位置合わせでセンターが機能しない：Firefoxで固定

Question

Firefoxでdivを水平にフレックスボックスに合わせる際に問題があります。 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をコンテナに、align-self: centerを.contact-iconsに試しましたが、同じ結果が得られました。

Chromeはうまく動作しますが、Firefoxで動作させることはできません。助言がありますか？

フィドル：それはほとんど中央に見えますが、それでもないフィドルでhttps://jsfiddle.net/1qrqxd7m/

。私の作業コピーでは、それは中心から外れています。

Answer 1

多分、Firefox用に特別な機能を試してみてください。 "position：sticky;"

Answer 2

position: fixedを使用しているため、フレックスコンテナのスタイルは実際には.contact-iconsの配置に影響するとは考えられません。私はglady役立つだろう

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