다른 div + 이미지 내부의 수직 중심 div

Question

나는 div에 이미지가 있고 또 다른 하나에는 div 텍스트가 있습니다. 이미지가 배경 이미지 역할을합니다 (이유가 있습니다. 이유는 무엇입니까? background-image 속성을 통해이를 수행하고 싶지 않습니다). 내부 div의 텍스트는 바깥 쪽이 div의 가운데에 세로로 가운데에 있어야합니다.

외부 장치 div은 좁은 장치에서 반응하는 동작을 위해 width: 100%입니다. (!) 나는 변경해야 https://jsfiddle.net/wLo80jdh/

한 가지를 스트레칭에 하지 위해 auto에 이미지의 height을 설정하는 것입니다 : 당신이 여기에서 볼 수

내 접근 방식은 작동합니다. https://jsfiddle.net/wLo80jdh/1/

내 질문은 : 그러나, 나는 내부 div의 텍스트가 수직으로 당신이 여기 볼 수 있듯이 더 이상 중심하지 않는 다음 height: auto를 설정 내가 (NO 뻗어 이미지) + 수직 중심을 자동으로 높이를 설정하는 방법 본문?

Answer 1

난 당신이 바이올린 포크와 사용자의 요구에 맞도록 조정. 나는 이걸 flexbox에 사용했다. https://jsfiddle.net/x9u0dxm8/

Answer 2

.outer .inner1에서 절대 위치를 제거하고 .outer .text로 설정하고 해당 클래스에이 추가 : 당신이 높이를 가지고 .inner1을 원하는 position:absolute두면

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

업데이트

과에서 display:table 제거 . 여기

전체 (업데이트) 예를 https://jsfiddle.net/wLo80jdh/5/