Edit in JSFiddle

<div class="hero">
  <div>
    <h1>Center This</h1>
    <a href="" title="use title tags">Center This</a>
  </div>
</div>

<!--

NOTES: Centering and Vertically aligning element(s) responsively.

Objectives: Simple, Effective, and Hack-Free.

Requirements: 
• Support all major browsers
• Have fallback for non-supported/legacy browsers
• Feature a responsive hero image
• Include and center multiple elements of unknown heights (headline, call-to-action, video, button, link)

Logistics:
• window.height checks and repaints with javascript is overkill
• Bootstrap’s "jumbotron" class on the outer div requires more work than value for overriding default bootstrap styles
• Table layout not an option
• Flexbox has low support

Solution:
• CSS "calc"
• position: relative on the parent 
• position: absolute on a child div

Browser Support: IE9 and up
• https://caniuse.com/#search=calc

How this works:
• Using CSS "top: calc();", we're able to estimate the height of the inner (to be) centered div or set calc to 50% and minus the half the height of the inner elements container. In the example, the inner container is approximately 150px, so divided by half is 75px. Chances are in responsive design, the font-sizes of the inner elements will change, requiring additional responsive rules (not ideal).

MULTIPLE INNER ELEMENTS
• In the case of having multiple dynamic elements (headline & CTA for example), estimating the height to be set in the calc is a more accurate option in responsive design and allows for rapidly testing a single variable "top: calc()" – TIP: work for accurate, not perfect since every browser will vary a bit.

Example: 

.hero div {
   position: absolute;
   top: 30%;  /* fallback for legacy browsers */
   top: calc(50% - 75px); /* half the height of the container of inner elements. CSS calc supported in IE9 */
   left: 0;
   text-align: center;
   width: 100%;
}

SINGLE INNER ELEMENT
• If only a single element is used (such as a headline), you can use the font-size of the headline to subtract against the 50% calc value 
– example top: calc(50% - 32px); for a font-size of 32px

Example: 

.hero div {
   position: absolute;
   top: 30%;  /* fallback for legacy browsers */
   top: calc(50% - 32px); /* css calc – font-size  */
   left: 0;
   text-align: center;
   width: 100%;
}

h1 {
  font-size: 32px;  
}

-->
html,
body {
  background: #161a1f;
  font-family: 'helvetica';
  height: 100%;
  margin: 0;
}

.hero {
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTt4XQCvED8EbiitadDQNSctgg7xkZZJL4BS97gjCAF4qZe2KMn') 0 0 no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 0;
}

.hero div {
  top: 30%;
  /* fallback for legacy browsers */
  top: calc(50% - 75px);
  /* css calc supported in IE9 */
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1;
}

h1 {
  color: #fff;
  font-size: 32px;
}

a {
  background: #ff5722;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  -o-box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  color: #fff;
  display: inline-block;
  padding: 15px 25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .15s ease-in-out;
}

a:hover,
a:focus {
  background: #f44336;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .8);
  -o-box-shadow: 0 4px 12px rgba(0, 0, 0, .8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .8);
}