HTML Vertical Align Middle Techinque

I've been encounter some critical layout structure requirements - Vertical Align Middle.

Luckily, I found a solution on 

In case that I'll need them in the future, I decide to leave myself some breadcrumbs here...

Here's the final example in jsFiddle.

And here's the referenced original post.

And the followings are contents in jsFiddle...



HTML:

<div class='v-center h-center scene'>
    <div class="v-center h-center content">
        <div class="control">
            <input class="form-control" type="password" 
                   maxlength="4" 
                   placeholder="Verification Code" />
            <button class="btn btn-primary btn-block">
                Confirm
            </button>
        </div>
    </div>
</div>

CSS:

.v-center {
    text-align: center;
}

.v-center:before{
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-right: -0.25em;
}

.v-center > * {
    display:inline-block;
    vertical-align: middle;
}

.h-center { text-align:center; }

Result: