フレックスボックス - Firefoxはアブソリュート要素を中心にしていません

Question

私はフレックスボックス内で絶対要素を使用しています。私のコードは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

あなたがfigcaptionする余裕0自動車を使用し、あなたのコンテンツを中心に、絶対位置を必要としません。

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

削除位置abloute。

編集： あなたが背景として画像を設定しなければなりません：

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

あなたは画像の高さを使用する場合は、変更しないでください何でも、左に追加：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;} 

Answer 2

私のコメントは、ほとんどのブラウザでflexboxでうまく動作しません。

同じ結果を持ついくつかのソリューションがあります。背景として画像に

フレキシボックス溶液：画像として緩い要素と
https://jsfiddle.net/PaulvdDool/v8L99tp4/1/

フレキシボックス溶液：
https://jsfiddle.net/PaulvdDool/v8L99tp4/2/

これはフレキシボックスなしで行うことができます。 IE8やIE9を使用している人々のための2つの代替ソリューション。フレキシボックスなし

背景画像ソリューション：フレキシボックスなし
https://jsfiddle.net/PaulvdDool/v8L99tp4/4/

ルース画像ソリューション：
https://jsfiddle.net/PaulvdDool/v8L99tp4/3/

更新
私は他の答えにあなたのコメントをお読みください。あなたは、バナーがイメージの高さを取るようにしたいと言いました。だからここにその修正があります。
https://jsfiddle.net/PaulvdDool/v8L99tp4/6/