Vertically align an div inside a div

SO #18516317 http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height

HTML

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

CSS

.parentbox {
    width:500px;
    height:400px;
    border-style:solid;
    
    text-align: center;  /* align the inline(-block) elements horizontally */
    position: relative;
}

.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}

.childbox {
    padding: 5px;
    border: 2px solid black;
    position: absolute;
    bottom: 0;
}