我想在不影響其他元素的情況下，讓一個div粘在屏幕的頂部，它的子元素在中間。

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

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

不，絕對定位與flex容器不沖突。使元素成為flex容器只會影響其內部布局模型，即其內容的布局方式。定位會影響元素本身，并會改變其在流布局中的外部角色。

這意味著

如果使用display: inline-flex向元素添加絕對定位，它將成為塊級的(就像display: flex一樣)，但仍然會生成flex格式上下文。

如果您使用display: flex向元素添加絕對定位，它將使用shrink-to-fit算法(內嵌級容器的典型算法)而不是fill-available算法來調整大小。

也就是說，絕對定位與flex子沖突。

因為它不在流中，是flex的絕對定位的子元素 容器不參與flex布局。

您忘記了指定. parent的寬度。

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

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

您必須將width:100%給parent以使文本居中。

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

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

在我的例子中，問題是我在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>