顯示：flex和Position：絕對衝突

Question

這是screenshot的問題。
底部：1 - Chrome，2 - Opera，3 - Firefox，4 - Edge。

下面我寫了可執行代碼。
爲方便起見，此處爲codepen。

基本概念：圖庫標籤和標誌在中心位置，其餘 - 在兩側。
Transform將用於動畫。

除了措施，我很感激，如果你幫助瞭解如何保持flex在Firefox中。
更確切地說，我認爲align-items: center在Firefox中沒有正確顯示。請幫忙。

.gallerypage { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #fff; 
 
} 
 

 
.gallerypage .header { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-flow: row nowrap; 
 
     -ms-flex-flow: row nowrap; 
 
      flex-flow: row nowrap; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: gray; 
 
} 
 

 
.gallerypage .header a { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    -webkit-flex-shrink: 0; 
 
     -ms-flex-negative: 0; 
 
      flex-shrink: 0; 
 
    text-align: center; 
 
    white-space: pre-wrap; 
 
    text-indent: -6px; 
 
    line-height: 30px; 
 
    font-family: "Kaushan Script", cursive; 
 
    font-size: 30px; 
 
} 
 

 
.gallerypage .header .sketches { 
 
    background-color: #fff; 
 
    width: 110px; 
 
    -webkit-transform: translate(-400px, 0px); 
 
     -ms-transform: translate(-400px, 0px); 
 
      transform: translate(-400px, 0px); 
 
} 
 

 
.gallerypage .header .smth { 
 
    background-color: #fff; 
 
    width: 140px; 
 
    height: 60px; 
 
    -webkit-transform: translate(-200px, 0px); 
 
     -ms-transform: translate(-200px, 0px); 
 
      transform: translate(-200px, 0px); 
 
} 
 

 
.gallerypage .header .gallery { 
 
    position: static; 
 
    text-indent: -14px; 
 
    line-height: normal; 
 
    width: 185px; 
 
    height: 90px; 
 
    background: gold; 
 
    font-size: 60px; 
 
} 
 

 
.gallerypage .header .logo { 
 
    position: static; 
 
    width: 60px; 
 
    height: 80px; 
 
    background: hotpink; 
 
} 
 

 
.gallerypage .header .logo .vs-logo { 
 
    display: block; 
 
    -webkit-flex-shrink: 0; 
 
     -ms-flex-negative: 0; 
 
      flex-shrink: 0; 
 
    width: 60px; 
 
    height: 80px; 
 
} 
 

 
.gallerypage .header .blog { 
 
    background-color: #fff; 
 
    width: 60px; 
 
    height: 38px; 
 
    -webkit-transform: translate(200px, 0px); 
 
     -ms-transform: translate(200px, 0px); 
 
      transform: translate(200px, 0px); 
 
} 
 

 
.gallerypage .header .about { 
 
    white-space: pre-wrap; 
 
    background-color: #fff; 
 
    width: 100px; 
 
    -webkit-transform: translate(400px, 0px); 
 
     -ms-transform: translate(400px, 0px); 
 
      transform: translate(400px, 0px); 
 
}

<div class="gallerypage"> 
 
    <div class="header"> 
 
    <a class="sketches">Sketches</a> 
 
    <a class="smth">Something serious</a> 
 
    <a class="gallery">Gallery</a><a class="logo"></a> 
 
    <a class="blog">Blog</a><a class="about">About it</a> 
 
    </div> 
 
/<div>

Answer 1

垂直和水平對齊問題在Firefox中解決。我還應用了一個簡單的動畫來確保它與您正在嘗試的操作兼容（將鼠標懸停在標題上以轉換其他項目）。

鏈接：http://codepen.io/anon/pen/YNXNLN

要解決在Firefox上垂直居中對齊，添加這種風格（我的意思是合併，因爲你已經使用變換屬性）：

a { 
transform: translateY(-50%); 
} 

但隨後它將被定位在在Chrome的最頂端，所以你會添加這種風格進行修復：

a { 
top: 50%; 
} 

同樣將水平對齊方式來完成「左：50％」和你已經ü se translateX，所以價值將取決於你。