另一个 div + 图像内的垂直中心 div
Vertical center div inside another div + image
我有一个包含图像的 div 和另一个包含文本的 div。该图像用作背景图像（我有一些原因，为什么我不想通过 background-image 属性 来做）。内部 div 的文本应在外部 div 中垂直居中。
外部 div 具有 width: 100% 用于窄设备的响应行为。
我的方法有效，您可以在此处看到：https://jsfiddle.net/wLo80jdh/
我需要更改的一件事是将图像的 height 设置为 auto，以便 不 (!) 拉伸它。但是，如果我设置 height: auto 那么内部 div 的文本不再垂直居中，正如您在此处看到的：https://jsfiddle.net/wLo80jdh/1/
我的问题是：如何将高度设置为自动（无拉伸图像）+ 垂直居中文本？
从 .outer .inner1 中删除绝对位置并将其设置为 .outer .text 并将其添加到 class:
top: 50%;
transform: translateY(-50%);
更新
如果您希望 .inner1 有高度离开 position:absolute 并从中删除 display:table。
这里有完整的（更新的）示例 https://jsfiddle.net/wLo80jdh/5/
我分叉了你 fiddle 并根据你的需要进行了调整。我为此使用了 flexbox
https://jsfiddle.net/x9u0dxm8/
我有一个包含图像的 div 和另一个包含文本的 div。该图像用作背景图像（我有一些原因，为什么我不想通过 background-image 属性 来做）。内部 div 的文本应在外部 div 中垂直居中。
外部 div 具有 width: 100% 用于窄设备的响应行为。
我的方法有效，您可以在此处看到：https://jsfiddle.net/wLo80jdh/
我需要更改的一件事是将图像的 height 设置为 auto，以便 不 (!) 拉伸它。但是，如果我设置 height: auto 那么内部 div 的文本不再垂直居中，正如您在此处看到的：https://jsfiddle.net/wLo80jdh/1/
我的问题是：如何将高度设置为自动（无拉伸图像）+ 垂直居中文本？
从 .outer .inner1 中删除绝对位置并将其设置为 .outer .text 并将其添加到 class:
top: 50%;
transform: translateY(-50%);
更新
如果您希望 .inner1 有高度离开 position:absolute 并从中删除 display:table。
这里有完整的（更新的）示例 https://jsfiddle.net/wLo80jdh/5/
我分叉了你 fiddle 并根据你的需要进行了调整。我为此使用了 flexbox
https://jsfiddle.net/x9u0dxm8/