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

Flexbox并未正式支持

absolute定位，但它可能适用于某些浏览器。

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

由于它不在流动状态，Flex容器的绝对定位子项不参与flex布局。

如果你想让它水平居中，只需添加left并使用transform: translate()将其移回自己宽度的50％，你也可以使用它将它向上移动8px。 / p>

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

Flexbox证明内容：中心在Safari中无法正常工作

1 个答案: