Apakah 'position: absolute' bertentangan dengan Flexbox?

Saya ingin membuat divtongkat di bagian atas layar tanpa mempengaruhi elemen lain, dan elemen turunannya di tengah.

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

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

Ketika saya menambahkan position: absolutegaris, justify-content: centermenjadi tidak valid. Apakah mereka bertentangan satu sama lain dan, apa solusinya?

EDIT

Terima kasih teman-teman, ini masalah lebar induk. Tapi saya di React Native, jadi saya tidak bisa mengatur width: 100%. Mencoba flex: 1dan align-self: stretch, keduanya tidak bekerja. Saya akhirnya menggunakan Dimensi untuk mendapatkan lebar penuh jendela dan berhasil.

EDIT

Pada versi yang lebih baru dari React Native (saya dengan 0.49), itu menerima width: 100%.

Tidak, benar-benar pemosisian tidak bertentangan dengan wadah fleksibel. Membuat elemen menjadi wadah fleksibel hanya memengaruhi model tata letak dalamnya, yaitu cara penataan kontennya. Pemosisian memengaruhi elemen itu sendiri, dan dapat mengubah peran luarnya untuk tata letak aliran.

Itu artinya

• Jika Anda menambahkan pemosisian absolut ke elemen dengan display: inline-flex, itu akan menjadi level blok (seperti display: flex), tetapi masih akan menghasilkan konteks pemformatan fleksibel.

• Jika Anda menambahkan pemosisian absolut ke elemen dengan display: flex, itu akan diukur menggunakan algoritme menyusut-agar-pas (tipikal penampung tingkat sebaris), bukan yang tersedia isi.

Konon, konflik pemosisian mutlak dengan anak-anak fleksibel .

Karena berada di luar aliran, turunan wadah fleksibel yang diposisikan secara mutlak tidak berpartisipasi dalam tata letak fleksibel.

Anda lupa lebar orang tua

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

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

Anda harus memberikan teks width:100%kepada orang tua center.

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

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

Jika Anda juga perlu membuat rata tengah secara vertikal, beri height:100%danalign-itens: center

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

Dalam kasus saya, masalahnya adalah saya memiliki elemen lain di tengah div dengan indeks-z yang bertentangan.

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