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

Posted 2023-03-05

技术标签:

【中文标题】如何在 Safari 中将 flex 容器的绝对定位子项居中？【英文标题】：How to center absolutely positioned children of a flex container in Safari? 【发布时间】：2017-11-09 03:11:40 【问题描述】：

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

似乎最简单、有远见的方法是使用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/

【问题讨论】：

你尝试显示：-webkit-box 吗？ -webkit-justify-内容：？ -webkit-align-items: ? 你需要你所拥有的，transform: translate，什么时候定位绝对定位的元素，而 Flexbox 做不到 @LGSon 那么为什么它在除 Safari 之外的所有浏览器上都能正常工作呢？你是说除了 Safari 之外的所有浏览器都做错了吗？这是一个选项：jsfiddle.net/z7kh5Laz/5 @LGSon 啊，我没有意识到我可以同时保留旧的 transform 内容和 Flexbox 代码。我假设它会甩掉正确使用 Flexbox 的浏览器，但它似乎在那里没有效果。谢谢！如果您需要功劳，请随时在下面实际回答。 【参考方案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>

【讨论】：

LGSon，你是我的救星！非常感谢！ @Ason- 谢谢 :-)【参考方案2】：

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

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