如何在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>

Answer 2

恭敬地,你的问题有一些错误的假设:

• "Safari(错误):[图片]" - Safari不一定错.
• "所有其他浏览器(正确):[image]" - 其他浏览器不一定正确.
• "我认为Flexbox真的准备好迎接黄金时段......" - 确实如此.98%的浏览器支持flexbox.
• "水平和垂直居中内容是Flexbox应该擅长的." - 它是.

这里有什么我想念的吗？

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

4.1.绝对定位的Flex儿童

Flex容器的绝对定位子项不参与flex布局.

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

在阅读规范中的整个部分时,似乎没有明确的正确或错误.

要获得更稳定可靠的解决方案,请不要使用flex属性来定位流出元素.改为使用CSS定位属性:

• 在flexbox中的图像上居中文本