Конфликтует ли "position: absolute" с Flexbox?

Я хочу сделать divпалку в верхней части экрана без какого-либо влияния на другие элементы, а ее дочерний элемент в центре.

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

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

Когда я добавляю position: absoluteстроку, она justify-content: centerстановится недействительной. Конфликтуют ли они друг с другом и какое решение?

РЕДАКТИРОВАТЬ

Спасибо, ребята, это проблема родительской ширины. Но я использую React Native, поэтому не могу установить width: 100%. Пробовал, flex: 1и align-self: stretchоба не работают. В итоге я использовал Размеры, чтобы получить всю ширину окна, и это сработало.

РЕДАКТИРОВАТЬ

Что касается более новой версии React Native (я использую 0.49), она принимает width: 100%.

Нет, абсолютно позиционирование не конфликтует с гибкими контейнерами. Превращение элемента в гибкий контейнер влияет только на его внутреннюю модель компоновки, то есть на способ компоновки его содержимого. Позиционирование влияет на сам элемент и может изменить его внешнюю роль в макете потока.

Что означает, что

• Если вы добавите абсолютное позиционирование к элементу с display: inline-flex, он станет блочным (например display: flex), но все равно будет генерировать контекст гибкого форматирования.

• Если вы добавите абсолютное позиционирование к элементу с помощью display: flex, он будет изменен с использованием алгоритма сжатия по размеру (типичного для контейнеров встроенного уровня) вместо алгоритма с возможностью заполнения.

Тем не менее, конфликты абсолютного позиционирования с дочерними элементами гибкости .

Поскольку он находится вне потока, абсолютно позиционированный дочерний элемент гибкого контейнера не участвует в гибком макете.

вы забыли ширину родителя

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

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

Вы должны передать текст width:100%родителю center.

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

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

Если вам также нужно выровнять по центру по вертикали, дайте height:100%иalign-itens: center

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

В моем случае проблема заключалась в том, что у меня был другой элемент в центре div с конфликтующим z-индексом.

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