Flexbox justify-content：中心在 Safari 中无法正常工作

Question

我无法让 flexbox 和 justify-content: center 在 Safari 中正常运行。

HTML：

<div class="flex-row">
  <div class="label"> Label </div>
  <div class="well"></div>
</div>

CSS：

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.well {
  width: 230px;
  height: 200px;
  background-color: grey;
}

.label {
  z-index: 2;
  position: absolute;
  margin-top: -8px;
}

在 Chrome 和 FF 中，这提供了一个简单的灰色井，其上方有一个标签。但是在 Safari 中，标签不居中。在 Safari 中打开下面的 CodePen 示例以查看未居中的标签：

https://codepen.io/jklevin/pen/weLvxx

我的预感是这是由于 Safari 中的一个实现错误，但好奇是否有人知道现有的解决方法。

Answer 1

absolute 定位不受 flexbox 正式支持，尽管它可能在某些浏览器中工作。

https://www.w3.org/TR/css-flexbox-1/#abspos-items

因为它是外流的，所以一个 flex 容器的绝对定位子容器不参与 flex 布局。

如果您希望它水平居中，只需添加一个left 并使用transform: translate() 将其向后移动50% 的宽度，您也可以使用它向上移动8px。

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.well {
  width: 230px;
  height: 200px;
  background-color: grey;
}

.label {
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-8px);
}

<div class="flex-row">
  <div class="label"> Label </div>
  <div class="well"></div>
</div>