A 'posição: absoluta' está em conflito com o Flexbox?

Quero fazer um divpalito na parte superior da tela sem qualquer influência sobre outros elementos e seu elemento filho no centro.

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

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

Quando eu adiciono a position: absolutelinha, justify-content: centertorna-se inválido. Eles conflitam entre si e qual é a solução?

EDITAR

Obrigado pessoal é o problema da largura dos pais. Mas estou em React Native, então não posso definir width: 100%. Tentei flex: 1e align-self: stretch, ambos não funcionam. Acabei usando Dimensions para obter a largura total da janela e funcionou.

EDITAR

A partir da versão mais recente do React Native (estou com 0,49), ele aceita width: 100%.

Não, absolutamente o posicionamento não entra em conflito com os contêineres flex. Tornar um elemento um flex container afeta apenas seu modelo de layout interno, ou seja, a maneira como seu conteúdo é organizado. O posicionamento afeta o próprio elemento e pode alterar sua função externa para o layout de fluxo.

Isso significa que

• Se você adicionar posicionamento absoluto a um elemento com display: inline-flex, ele se tornará nível de bloco (como display: flex), mas ainda gerará um contexto de formatação flexível.

• Se você adicionar posicionamento absoluto a um elemento com display: flex, ele será dimensionado usando o algoritmo de redução para caber (típico de contêineres embutidos) em vez do algoritmo de preenchimento disponível.

Dito isso, absolutamente conflitos de posicionamento com crianças flex .

Como está fora do fluxo, um filho absolutamente posicionado de um flex container não participa do flex layout.

você esqueceu a largura do pai

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

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

Você tem que dar width:100%ao pai centero texto.

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

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

Se você também precisar centralizar o alinhamento verticalmente, dê height:100%ealign-itens: center

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

No meu caso, o problema era que eu tinha outro elemento no centro do div com um Z-index conflitante.

.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>