別のdiv +画像内の垂直中心div

Question

divには画像が含まれ、別のdivにはテキストが含まれています。イメージは背景イメージとして機能します（理由はいくつかありますが、私はbackground-imageプロパティでそれをやりたいのですが）。内側divのテキストは、外側のdivに垂直に中央に配置する必要があります。

アウターdivは、細いデバイスで応答する動作のためにwidth: 100%です。 （！）私は変更する必要がhttps://jsfiddle.net/wLo80jdh/

一つのことは、それを伸ばすにないためにautoへの画像のheightを設定することです：あなたがここに見ることができるよう

私のアプローチは動作します。しかし、私はheight: autoを設定した場合、あなたがここに見ることができるように、その後、内側divのテキストを縦にもうセンタリングされていません。https://jsfiddle.net/wLo80jdh/1/

私の質問はありません：私はautoに高さを設定するにはどうすればよい（無延伸画像）+縦方向にセンタリングテキスト？

Answer 1

私はあなたがいじるフォークやニーズに合わせてそれを調整しました。私はそのためにflexboxを使用しました https://jsfiddle.net/x9u0dxm8/

Answer 2

.outer .inner1から絶対位置を削除し、.outer .textに設定しても、そのクラスにこれを追加します。

top: 50%; 
transform: translateY(-50%); 

更新

あなたは.inner1は、高さがposition:absoluteを残し、それからdisplay:tableを削除したい場合は。

全文はここ（更新）の例https://jsfiddle.net/wLo80jdh/5/