html - 如何在 Safari 中将 flex 容器的绝对定位子项居中？

Question

我有一个包含图像和一些文本的容器。我希望文本在图像中间垂直和水平居中。

似乎最简单、前瞻性的方法是使用 Flexbox 和文本的绝对定位:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  position: absolute;
}

<div class='container'>
  <div class='text'>
    This should be centered
  </div>
  <img src="https://placehold.it/250x250" />
</div>

文本在两个轴上都居中。这似乎适用于所有现代浏览器......除了 Safari。

Safari 似乎根本不使文本居中。它只是位于容器的顶部/左侧，就像一个普通的绝对定位元素在非 flexbox 布局中一样。

Safari(错误):

所有其他浏览器(正确):

我认为 Flexbox 真的已经准备好迎接黄金时段，但考虑到有多少人在 iOS 上使用 Safari，这似乎是一个交易破坏者。将内容水平和垂直居中是 Flexbox 应该擅长的。

我唯一真正的选择是不使用 Flexbox 然后使用:

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

但出于进步的原因，我更愿意使用 Flexbox。

这里有什么我遗漏的吗？尽管我不愿意提出要求，但这里是否有一些仅适用于 Safari 的解决方法？除了“不使用 flexbox”之外，是否有任何解决方案，因为如果这是 2017 年年中的答案，那将是令人失望的。

JSFiddle 供引用:https://jsfiddle.net/z7kh5Laz/4/

Answer 1

当谈到 Flexbox 和绝对定位时，有一些该做的和不该做的，在这种情况下，Safari 不会像其他浏览器那样将绝对定位的元素居中。

您可以结合使用 Flexbox 和 transform: translate，因为后者不会影响前者，并且当时机成熟时，它们与单独使用 Flexbox 的行为相同，您可以删除 transform/left/top 部分。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

<div class='container'>
  <div class='text'>
    This should be centered
  </div>
  <img src="https://placehold.it/250x250"/>
</div>