Vertically align contents of div

Question

I'd like to vertically align the contents of my div.

So basically 'Hello test' should be in the center of the div, vertically.

Demonstration

.parent {
    background:blue;
    float:left;
    width:100%
}

.parent div {
    float:left;
    width:50%;
}

h1 {
    font-size:50px;
    margin:0;
    padding:0;
}

<div class="parent">

<div>
    <h1>hello!</h1>
    <p>test</p>
</div>

<div>
    <img src="http://placehold.it/250x250" />
</div>

</div>

Answer 1

You can use table layout for this:

.parent {
    background:blue;
    width:100%;
    display: table;
}

.parent div {
    display:table-cell;
    vertical-align:middle;
    width:50%;
}

h1 {
    font-size:50px;
    margin:0;
    padding:0;
}

<div class="parent">

<div>
    <h1>hello!</h1>
    <p>test</p>
</div>

<div>
    <img src="http://placehold.it/250x250" />
</div>

</div>