Display: flex and position: absolute conflict

Question

Here is a screenshot of the problem.
Below: 1 - Chrome, 2 - Opera, 3 - Firefox, 4 - Edge.

Below I wrote the executable code.
For convenience, here is the codepen .

The main idea: a gallery label and a logo in the center, and the rest on the sides.
Transform will be used for animation.

Besides the measure, I am grateful if you can help me understand how to support flex in Firefox.
More precisely, I think align-items: center not display correctly in Firefox. Please help.

 .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

Problems with vertical and horizontal alignment are resolved in Firefox. I also applied a simple animation to make sure that it is compatible with what you are trying to do (hover over the title to go to other elements).

Link: http://codepen.io/anon/pen/YNXNLN

To fix the vertical center alignment on firefox, add this style (I mean merging, since you already use the transform attribute):

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

But then it will be located at the very top corner of Chrome, so you add this style to fix it:

 a { top: 50%; } 

The same will be done with horizontal alignment "left: 50%" and you are already using translateX, so the value will be up to you.