"position: absolute"与Flexbox是否冲突？

Question

我希望把一个 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，两者都不起作用。我最终使用Dimensions获取窗口的完整宽度，并且解决了问题。

编辑

在较新版本的React Native中（我使用的是0.49），接受width: 100%。

- Stanley Luo

---

这可能对你有所帮助.. https://css-tricks.com/almanac/properties/p/position/ - Shivkumar kondi

这种行为在2016年的某个时候发生了改变-https://developers.google.com/web/updates/2016/06/absolute-positioned-children - Simon_Weaver

Answer 1

不，绝对定位与弹性容器没有冲突。将元素设置为弹性容器只影响其内部布局模型，即其内容的布局方式。而定位影响元素本身，可以改变其在流式布局中的外部角色。

这意味着

• 如果您为具有display: inline-flex的元素添加绝对定位，则它将变成块级元素（就像display: flex一样），但仍将生成一个弹性格式上下文。

• 如果您为具有display: flex的元素添加绝对定位，则该元素将使用收缩到适合算法进行大小调整（与内联级容器通常相同），而不是使用填充可用空间的算法。

话虽如此，绝对定位与弹性子元素存在冲突。

由于它处于流程之外，弹性容器的绝对定位子级不参与弹性布局。

- Oriol

Answer 2

您忘记指定.parent的宽度。

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

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

- Shivkumar kondi

Answer 3

为了使文本居中，您需要将width:100%应用到父元素。

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

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

如果您需要垂直居中对齐，请添加 height:100% 和 align-items:center

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

- Kalpesh Patel

Answer 4

在我的情况下，问题是我在div中心有另一个元素具有冲突的z-index。

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

- Brandon