Having trouble in vertically center aligning a div with block of texts - css

Question

https://jsfiddle.net/n00q5wdn/
Please refer to fiddle for the output plus I'm linking an image so that the problem may be understood more clearly.
I just want to have the 'hgroup' to be vertically centered.
HTML:
<article id="full-height">
<div class="hgroup">
<h1>Exotic Designs</h1>
<h2>Best Quality</h2>
</div>
</article>
SCSS:
#full-height {
background-color: red;
min-height: 600px;
}
.hgroup {
h1 {
color: white;
font-size: 5em;
font-weight: 800;
line-height: 0.8em;
text-shadow: black 0 0 20px;
text-align: center;
}
h2 {
display: block;
color: white;
width: 60%;
max-width: 200px;
margin: 0 auto;
text-align: center;
border: 1px solid white;
margin-top: 15px;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
font-size: 1.3em;
}
}

Answer 1

The best fit for this kind of problem is flexbox, which uses the Box Alignment spec, specifically created for these situations.
If you set the #full-height-element to display as a flex row container, you can align the contents with align-items (vertically) and justify-content (horizontally).
#full-height {
display: flex;
align-items: center;
justify-content: center;
}
See forked fiddle here.
This will work in most modern browsers, and if you run it through something like Autoprefixer you can get it working in some slightly older browsers as well (IE10, older Safari etc). IE9 and other ancient browsers do not support flexbox, so I recommend a fallback with either the .hgroup element having a fixed margin, or just top aligned etc. If you can get away with a fixed, explicit height of the container, there's another, more hacky and involved solution:
I see you have dabbled with inline-block and vertical-align to try and use the middle keyword for vertical centering. That will only work if you can set a definite height on the #full-height container, and use a "ghost"-element to force the line-height calculation to cover the box, for example:
#full-height {
height: 600px;
text-align: center; /* horizontal centering */
}
/**
* "ghost element", to force the calculation of the
* middle keyword to equal the vertical middle of
* the box.
*/
#full-height:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
/* offset the whitespace generated by inline-block.
May vary with font-size. */
margin: -.25em;
}
.hgroup {
display: inline-block;
vertical-align: middle;
}
See jsbin example for this solution here.