Horizontal and Vertical Center within 100% CSS3's Viewport Height

I'm using the CSS3's Viewport Height to make a fullscreen section (height: 100vh). Unfortunately, I'm having trouble horizontally and vertically centering elements within a section. I'm attempting to have an image and bit of text within the first section appear in the center of the screen as a group. Thanks for the help!

http://ift.tt/1BNUk1C

HTML:

<section class="red-bg">
    <div class="middle">
        <img src="http://ift.tt/1EXkU5H" alt="" />
        <h1>Some text here.</h1>
    </div>
</section>

<section class="blue-bg">
    <p>Another section here.</p>
</section>

CSS:

body {
    color: #fff;
}

section {
    width: 100%;
    height: 100vh;
}

.middle {
    /* needs to be vertically and horizontally aligned */
}

.red-bg {
    background-color: #f00;
}

.blue-bg {
    background-color: #00f;
}