我有一个div，其中包含一个图片，另一个div包含文字。图像用作背景图像（我有一些原因，为什么我不希望通过background-image属性执行此操作）。内部div的文本应垂直居中于外部div。
外部div对于使用窄设备的响应行为具有width: 100%。
我的方法可以在这里看到：https://jsfiddle.net/wLo80jdh/
我需要更改的一件事是将图片的height设置为auto，以便不（！）拉伸它。但是，如果我设置height: auto，则内部div的文字不再垂直居中，如您所见：https://jsfiddle.net/wLo80jdh/1/
我的问题是：如何将高度设置为自动（无拉伸图像）+垂直居中文本？
答案 0 :(得分：1)
我分叉你，调整它以适应你的需要。我使用了flexbox
https://jsfiddle.net/x9u0dxm8/
答案 1 :(得分：0)
从.outer .inner1移除绝对位置并将其设置为.outer .text并将其添加到该类：
top: 50%;
transform: translateY(-50%);
<强>更新
如果您希望.inner1高度离开position:absolute并从中删除display:table。
这里的完整（更新）示例https://jsfiddle.net/wLo80jdh/5/