Flexbox - Firefox 不居中绝对元素 [重复]

Question

我在 flexbox 中使用绝对元素。我的代码在 chrome 上工作，但 Firefox 没有将我的绝对元素居中，也没有缩放我的图像。

这是我的代码

<figure class="banner">
  <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png" />
  <figcaption>
    <p>TEXT</p>
    <h3>TİTLE</h3>
    <p>TEXT</p>
    <a href="#">DETAIL</a>
  </figcaption>
</figure>

css:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;}
.banner figcaption{position:absolute; z-index:1; color:@white; text-align:center; width:90%; align-self:center; background:#f00;}

https://jsfiddle.net/nbqtn678/

Answer 1

就像我在评论中所说的那样，position: absolute 在大多数浏览器中都不能很好地与 flexbox 配合使用。

以下是一些具有相同结果的解决方案。

以图片为背景的Flexbox解决方案：
https://jsfiddle.net/PaulvdDool/v8L99tp4/1/

以图片为松散元素的Flexbox解决方案：
https://jsfiddle.net/PaulvdDool/v8L99tp4/2/

它可以在没有 flexbox 的情况下完成。因此，这里有两个备用解决方案，适用于仍在使用 IE8 或 IE9 的人。

不带flexbox的背景图片解决方案：
https://jsfiddle.net/PaulvdDool/v8L99tp4/4/

没有flexbox的松散图片解决方案：
https://jsfiddle.net/PaulvdDool/v8L99tp4/3/

更新
我阅读了您对另一个答案的评论。你说你想让横幅占据图像的高度。所以这就是修复。
https://jsfiddle.net/PaulvdDool/v8L99tp4/6/

Answer 2

您不需要绝对位置来使您的内容居中，使用 margin 0 auto 到 figcaption。

.banner figcaption{ margin: 0 auto; ...}

删除位置。

编辑： 如果您想将图像作为背景：

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;}
.banner img{position: absolute}
.banner figcaption{margin: 0 auto; z-index:1; color:#fff; text-align:center; width:90%; align-self:center; }

编辑 3：

如果要使用图片的高度，什么都不做，加left: 5%:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;}
.banner figcaption{position:absolute; left: 5%; z-index:1; color:#fff; text-align:center; width:90%; align-self:center; background:#f00;}