Vertically Center Text - html

Question

I am having an issue with some CSS within my code.
Using bootstrap I have created a square which is 400px height, and I would like to have text inside there which is centered vertically.
I am using JavaScript to change the text when hovered, the issue here is if the text changes to two lines worth, the CSS then no longer works correctly.
JSfiddle: https://jsfiddle.net/Ljprxkrq/3/ For some reason the Hover does not seem to work in fiddle.
<div class="col-xs-offset-1 col-xs-10 col-sm-offset-0 col-sm-4">
<div class="navigation-links">
<h2><a href="#" id="text-display" class="network"
onmouseover="changeText('More network information here')"
onmouseout="defaultText()">Network</a></h2>
</div>
</div>
.navigation-links {
height: 400px;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 40px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: white;
text-decoration: none;
}

Answer 1

Well, ok, let's start with JSFiddle and Javascript not working.
If you do not specify the wrap setting it defaults to "onLoad". This results with all JavaScript being wrapped in a function run after result has been loaded. All variables are local to this function thus unavailable in the global scope.
Change the wrapping setting to "no wrap" and it'll work:
Source - Screenshot
As for the problem:
Seems like you're using flex already. Why not just use it for vertical alignment as well? Append:
.navigation-links {
display: flex;
align-items: center;
}
JSFiddle

Answer 2

Try this:
.navigation-links {
background: #eee none repeat scroll 0 0;
display: table-cell;
height: 100px;
vertical-align: middle;
}
<div class="col-xs-offset-1 col-xs-10 col-sm-offset-0 col-sm-4">
<div class="navigation-links">
<h2><a href="#" id="text-display" class="network"
onmouseover="changeText('More network information here')"
onmouseout="defaultText()">Network</a></h2>
</div>
</div>
Update:
you can add class vertical-center with navigation-links like class="navigation-links vertical-center"
demo