Vertically Center Text

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.

<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>