Q:

Vertically centering a flex item works in Chrome but not Firefox

I've written this simple code for centering my inner div:

<div style="display: flex;align-items: center;width: 100%;height: 600px;background-color: gray;">
  <div style="background-color: white;width: 100px;height: 300px;position: absolute;"></div>
</div>

And it works fine in Chromium. but not in Firefox.
In Firefox the inner div is not centered.
Firefox:

Chromium:

I need the inner div to remain absolutely positioned.

A:

It's important to note that absolutely positioned flex items do not participate in flex layout.
From the spec:

4.1.  Absolutely-Positioned Flex
  Children
As it is out-of-flow, an absolutely-positioned child of a flex
  container does not participate in flex layout.

In other words, flex properties, such as align-items: center on the flex container (like in your code) are not respected by out-of-flow flex items.
Your item appears centered in Chrome simply because that's where Chrome positions an absolutely positioned element with default offset values (i.e., top, bottom, left and right are all set to auto.) Firefox positions it somewhere else.
To vertically center your item in all browsers use the offset properties:

flex-container {
  display: flex;
  /* align-items: center; */
  width: 100%;
  height: 600px;
  background-color: gray;
  position: relative;
}

flex-item {
  background-color: white;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
<flex-container>
  <flex-item></flex-item>
</flex-container>

jsFiddle
For more details about centering with CSS positioning properties see this post:

Element will not stay centered, especially when re-sizing screen

