如何在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 / { {1}} / left部分。

＆＃13;

＆＃13;

top

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

恭敬地，你的问题有一些错误的假设：

• ＆＃34; Safari（错误）：[图片]＆＃34; - Safari不一定错。
• ＆＃34;所有其他浏览器（正确）：[image]＆＃34; - 其他浏览器不一定正确。
• ＆＃34;我认为Flexbox已准备好迎接黄金时段。＆＃34; - 确实如此。 98% of browsers support flexbox。
• ＆＃34;水平和垂直居中内容是Flexbox应该擅长的。＆＃34; - 它是。

  

我在这里找不到任何东西？

是的，规范中的部分表示绝对定位的flex项忽略了flex属性。

  

4.1. Absolutely-Positioned Flex Children

     

Flex的绝对定位的孩子   容器不参与flex布局。

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

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

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

• Center text over an image in flexbox