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

问题描述

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

看来最简单的，前瞻性的方法是使用Flexbox和绝对定位文本︰

.container {display：flex; justify-content：center; align-items：center; position：relative;}。text {position：absolute;}

< div class ='container'> < div class ='text'>这应该居中< / div> < img src =https://placehold.it/250x250/>< / div>

文本以两个轴为中心。这似乎适用于所有现代浏览器.....除了Safari浏览器。

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

Safari（错误）：

所有其他浏览器（正确）：

我以为Flexbox真的准备好了黄金时段，一个交易断路器考虑有多少人在iOS上使用Safari。

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

  .text {
 position：absolute; 
剩下：50％; 
 top：50％; 
 transform：translate（-50％， -  50％）; 
} 
  

但是我宁愿使用Flexbox来获得更多的理由。

有什么我在这里失踪？尽管我不想问这个问题，但是有一些Safari浏览器只能在这里工作吗？有没有什么解决方案，除了不使用flexbox，因为如果这是在2017年年中的答案将是令人失望。

JSFiddle作为参考： a href =https://jsfiddle.net/z7kh5Laz/4/ =nofollow noreferrer> https://jsfiddle.net/z7kh5Laz/4/

当涉及到Flexbox和绝对定位时，有一些和不这样做，在这种情况下，Safari不会将绝对定位元素居中浏览器可以。

您可以结合使用Flexbox和 transform：translate ，因为后者不影响前者，当时间到了，他们在Flexbox中的表现都一样，你可以放弃 transform / left / top 部分。

  .container {display：flex; justify-content：center; align-items：center; position：relative;}。text {position：absolute;剩下：50％;顶部：50％; transform：translate（-50％， -  50％）;}  

< div class ='container'> < div class ='text'>这应该居中< / div> < img src =https://placehold.it/250x250/>< / div>

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>

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