Center expanding text on a hover

I have got a hover working with some text and overlay, but I want the text to be centered in the middle. The heading might change so it needs to be center no matter the number of words (I know there is a limit to the container).

I know this is possible to using jquery but I just wanted to see if there was a CSS way of doing it.

li {
  position: relative;
  display: inline-block;
  margin: 0 -4px -4px 0;
}
li img {
  display: block;
}
li .over {
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: white;
}
li:hover .over {
  display: block;
}

<div class="wapper">
  <ul>
    <li>
      <img src="http://ift.tt/K6GcHn">
      <div class="over">
        <h1>Hello</h1>
      </div>
    </li>
  </ul>
</div>