垂直中心div在另一个div +图像内

Question

我有一个div，其中包含一个图片，另一个div包含文字。图像用作背景图像（我有一些原因，为什么我不希望通过background-image属性执行此操作）。内部div的文本应垂直居中于外部div。

外部div对于使用窄设备的响应行为具有width: 100%。

我的方法可以在这里看到：https://jsfiddle.net/wLo80jdh/

我需要更改的一件事是将图片的height设置为auto，以便不（！）拉伸它。但是，如果我设置height: auto，则内部div的文字不再垂直居中，如您所见：https://jsfiddle.net/wLo80jdh/1/

我的问题是：如何将高度设置为自动（无拉伸图像）+垂直居中文本？

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/