I'm trying to utilize CSS3's Viewport Height to create a fullscreen section with a height of 100vh. However, I am encountering difficulties in centering elements both horizontally and vertically within the section. My goal is to have an image and some text in the first section displayed at the center of the screen as a cohesive group. Any assistance would be greatly appreciated!
Check out this code on jsFiddle
HTML:
<section class="red-bg">
<div class="middle">
<img src="http://lorempixel.com/g/300/300/abstract/" alt="" />
<h1>Insert text here.</h1>
</div>
</section>
<section class="blue-bg">
<p>Another section content goes here.</p>
</section>
CSS:
body {
color: #fff;
}
section {
width: 100%;
height: 100vh;
}
.middle {
/* Need to align vertically and horizontally */
}
.red-bg {
background-color: #f00;
}
.blue-bg {
background-color: #00f;
}