JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
        <img src="http://img01.deviantart.net/cb2e/i/2011/323/0/3/background_05_1600x1200_by_frostbo-d42mpk5.png"> 
        <div class="text" >
             <h1>Title words.</h1>

             <h2>Subtitle words here. Lots of them. Like a paragraph's worth.</h2>

        </div>
    </div>

CSS

.flex-container {
    width: min-content;
    height: max-content;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid red;
    position:relative;
}

.flex-container > img {
    width:100%;
    height:auto;
    display:block;
}

.flex-container > .text {
    position:absolute;
    left:0; right:0;
    top:50%;
    transform:translate(0,-50%);
}