¿La 'posición: absoluta' entra en conflicto con Flexbox?

Quiero hacer un divpalo en la parte superior de la pantalla sin ninguna influencia sobre otros elementos, y su elemento hijo en el centro.

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }

<div class="parent">
  <div class="child">text</div>
</div>

Cuando agrego la position: absolutelínea, se justify-content: centervuelve inválida. ¿Están en conflicto entre sí y cuál es la solución?

EDITAR

Gracias chicos, es el problema del ancho de los padres. Pero estoy en React Native, por lo que no puedo configurar width: 100%. Intenté flex: 1y align-self: stretchambos no funcionan. Terminé usando Dimensions para obtener el ancho completo de la ventana y funcionó.

EDITAR

A partir de la versión más reciente de React Native (estoy con 0.49), acepta width: 100%.

No, el posicionamiento absoluto no entra en conflicto con los contenedores flexibles. Hacer que un elemento sea un contenedor flexible solo afecta su modelo de diseño interno, es decir, la forma en que se distribuyen sus contenidos. El posicionamiento afecta al elemento en sí y puede alterar su función externa para el diseño del flujo.

Eso significa que

• Si agrega posicionamiento absoluto a un elemento con display: inline-flex, se convertirá en el nivel de bloque (como display: flex), pero aún generará un contexto de formato flexible.

• Si agrega posicionamiento absoluto a un elemento con display: flex, se dimensionará utilizando el algoritmo de encoger para ajustar (típico de los contenedores de nivel en línea) en lugar del de relleno disponible.

Dicho esto, los conflictos de posicionamiento absoluto con los niños flexibles .

Como está fuera de flujo, un elemento secundario de un contenedor flexible en posición absoluta no participa en el diseño flexible.

has olvidado el ancho del padre

.parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

Tienes que dar width:100%a los padres centerel texto.

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

Si también necesita alinear al centro verticalmente, ceda height:100%yalign-itens: center

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
 }

En mi caso, el problema era que tenía otro elemento en el centro del div con un índice z en conflicto.

.wrapper {
  color: white;
  width: 320px;
  position: relative;
  border: 1px dashed gray;
  height: 40px
}

.parent {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 20px;
  left: 0;
  right: 0;
  /* This z-index override is needed to display on top of the other
     div. Or, just swap the order of the HTML tags. */
  z-index: 1;
}

.child {
  background: green;
}

.conflicting {
  position: absolute;
  left: 120px;
  height: 40px;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
       Centered
    </div>
  </div>
  <div class="conflicting">
    Conflicting
  </div>
</div>