Vertically centered, Absolutely positioned child force parent height to match
<p>I'd like to have a vertically centered div, inside a min-height parent div. I use this code to vertically center my div:</p>

<pre><code>.parent {
    width:100%;
    min-height: 25vh;
    max-height: auto;
    position: relative; /* so center-area can be positioned absolute */
    display: inline-block;
    background:lightblue;
}
center-area {/* let it fill the whole container */
    position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;
    display: inline-block;
}    
.center-area:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.centered {
    display: inline-block;
    vertical-align: middle;
    font-size:18px;
    background:green;
    margin:20px;
}
</code></pre>

<p>Perhaps some JS is needed? I'd like the blue, parent div's height to move with the child's height...</p>

<p>I realize the issue is that the child is absolutely positioned so that I can vertically align it, but when the content is greater than the parent div's height allows, I'd like the parent dive to lengthen down the page to accommodate... I hope that makes sense.</p>

<p>here is my JSfiddle:</p>

<p><a href="https://jsfiddle.net/mr_antlers/8s8bhzd6/">https://jsfiddle.net/mr_antlers/8s8bhzd6/</a></p>

<p>Thanks in advance for your advice!</p>