Czy „pozycja: absolutna” jest sprzeczna z Flexbox?

Chcę zrobić divkij na górze ekranu bez wpływu na inne elementy, a jego element potomny w środku.

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

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

Kiedy dodam position: absolutewiersz, justify-content: centerstaje się nieważny. Czy są ze sobą w konflikcie i jakie jest rozwiązanie?

EDYTOWAĆ

Dzięki chłopaki, to problem szerokości rodzica. Ale jestem w React Native, więc nie mogę ustawić width: 100%. Próbowałem flex: 1i align-self: stretchoba nie działają. Skończyło się na tym, że użyłem Dimensions, aby uzyskać pełną szerokość okna i zadziałało.

EDYTOWAĆ

Od nowszej wersji React Native (jestem z 0.49), akceptuje width: 100%.

Nie, absolutne pozycjonowanie nie koliduje z kontenerami elastycznymi. Uczynienie elementu jako kontenera elastycznego ma wpływ tylko na jego wewnętrzny model układu, czyli sposób, w jaki rozłożona jest jego zawartość. Pozycjonowanie wpływa na sam element i może zmienić jego zewnętrzną rolę w układzie przepływu.

Oznacza to, że

• Jeśli dodasz pozycjonowanie bezwzględne do elementu za pomocą display: inline-flex, stanie się on na poziomie bloku (podobnie jak display: flex), ale nadal będzie generował kontekst formatowania flex.

• Jeśli dodasz pozycjonowanie bezwzględne do elementu za pomocą display: flex, zostanie on zwymiarowany przy użyciu algorytmu zmniejszania, aby dopasować (typowego dla kontenerów na poziomie liniowym) zamiast algorytmu z możliwością wypełnienia.

To powiedziawszy, absolutne pozycjonowanie koliduje z elastycznymi dziećmi .

Ponieważ jest poza przepływem, pozycjonowany absolutnie element podrzędny pojemnika elastycznego nie uczestniczy w układzie elastycznym.

zapomniałeś szerokości rodzica

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

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

Musisz dać width:100%rodzicowi centertekst.

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

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

Jeśli chcesz również wyśrodkować, wyrównaj w pionie, podaj height:100%ialign-itens: center

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

W moim przypadku problem polegał na tym, że miałem inny element w środku div z kolidującym z z-indexem.

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