如何在 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/@ 987654324@ 部分。

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

Answer 2

尊敬的，您的问题中有一些错误的假设：

• "Safari (wrong): [image]" - Safari 不一定是错的。
• “所有其他浏览器（正确）：[图片]” - 其他浏览器不一定正确。
• “我认为 Flexbox 已经为黄金时段做好了准备……” - 确实如此。 98% of browsers support flexbox。
• “将内容水平和垂直居中是 Flexbox 应该擅长的。” - 确实如此。

这里有什么我遗漏的吗？

是的，规范中说绝对定位的弹性项目忽略弹性属性的部分。

4.1. Absolutely-Positioned Flex Children

flex 的绝对定位子元素 容器不参与弹性布局。

如果某些浏览器选择将 flex 属性应用于绝对定位的 flex 项，那是他们的选择。但是如果浏览器忽略了这些元素的 flex 属性，这并不一定意味着它们违反了规范。

在阅读规范中的整个部分时，似乎没有明确的对错。

要获得更稳定可靠的解决方案，请不要使用 flex 属性来定位不流畅的元素。改用 CSS 定位属性：

• Center text over an image in flexbox