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

Question

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://jsfiddle.net/stybfgju/
HTML:
<section class="red-bg">
<div class="middle">
<img src="http://lorempixel.com/g/300/300/abstract/" 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;
}

Answer 1

try flexbox
body {
color: #fff;
}
section {
width: 100%;
height: 100vh;
display : flex;
}
.middle {
/* needs to be vertically and horizontally aligned */
margin : auto;
}
.red-bg {
background-color: #f00;
}
.blue-bg {
background-color: #00f;
}
<section class="red-bg">
<div class="middle">
<img src="http://lorempixel.com/g/300/300/abstract/" alt="" />
<h1>Some text here.</h1>
</div>
</section>
<section class="blue-bg">
<p>Another section here.</p>
</section>

Answer 2

Try this. http://jsfiddle.net/stybfgju/1/
.middle {
/* vertical centering */
position: relative;
top: 50%;
transform: translateY(-50%);
/* horizontal centering */
margin: 0 auto;
display: table;
}
If you change display to block then you'll need to explicitly set width
Add text-align: center if needed.