如何在 Safari 中将 flex 容器的绝对定位子项居中? [英] How to center absolutely positioned children of a flex container in Safari?

问题描述

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

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

.container {显示:弹性；对齐内容:居中；对齐项目:居中；位置:相对；}.文本 {位置:绝对；}

这个应该居中
<img src="https://placehold.it/250x250"/>

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

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

Safari(错误):

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

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

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

.text {位置:绝对；左:50%；顶部:50%；变换:翻译(-50%，-50%)；}

但出于渐进的原因，我更愿意使用 Flexbox.

这里有什么我遗漏的吗?尽管我很不想要求它，但这里有一些仅限 Safari 的解决方法吗?除了不使用 flexbox"之外，还有其他解决方案吗，因为如果这是 2017 年年中的答案，那将会令人失望.

JSFiddle 供参考:https://jsfiddle.net/z7kh5Laz/4/

解决方案

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

您可以结合使用 Flexbox 和 transform: translate，因为后者不会影响前者，当时间到来时，它们的行为都与单独使用 Flexbox 相同，您只需删除 transform/left/top 部分.

.container {显示:弹性；对齐内容:居中；对齐项目:居中；位置:相对；}.文本 {位置:绝对；左:50%；顶部:50%；变换:翻译(-50%，-50%)；}

这个应该居中
<img src="https://placehold.it/250x250"/>

I have a container that contains both an image, and some text. I want the text to be vertically and horizontally centered in the middle of the image.

It seems that the easiest, forward-thinking method is to use Flexbox and absolute positioning of the text:

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

The text is centered in both axes. This seems to work in all modern browsers..... except Safari.

Safari appear to not center the text at all. It's just sitting at the top/left of the container like a normal absolutely positioned element would be in a non-flexbox layout.

Safari (wrong):

All other browsers (correct):

I thought Flexbox was really ready for primetime, but this seems like a deal-breaker considering how many people using Safari on iOS. Centering content horizontally and vertically is something Flexbox should be great at.

My only real alternative here is to not use Flexbox and then use:

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

But I would much rather be using Flexbox for progressive reasons.

Is there anything I'm missing here? As much as I hate to ask for it, is there some of Safari-only work-around here? Is there any solution to this besides just "not using flexbox" because if that is the answer in mid-2017 that is going to be disappointing.

JSFiddle for reference: https://jsfiddle.net/z7kh5Laz/4/

解决方案

When it comes to Flexbox and absolute positioning, there is a few do's and don't's, and in this case, Safari won't center an absolute positioned element the other browsers does.

You can combine Flexbox and transform: translate, as the latter does not impact the former, and when times comes, where they all behave the same with Flexbox alone, you can just drop the transform/left/top part.

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

这篇关于如何在 Safari 中将 flex 容器的绝对定位子项居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！