Имеет ли "позиция: абсолютный" конфликт с flexbox?

Ответ 1

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

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

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

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

Тем не менее, абсолютно позиционирует конфликты с гибкими детьми.

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

Ответ 2

вы забыли ширину родительского

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

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

Ответ 3

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

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

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