Unable To Center Text On Image

I have a particular setup that allows 4 images set side by side and to act responsively in a list format. I am trying to have a caption with a background matching the same height a

Solution 1:

Here's my fix: https://jsfiddle.net/JustusFT/jrhk8L7j/ I used this technique to center it. https://www.w3.org/Style/Examples/007/center.en.html#hv3

I set the thumbnail's position: to relative. This causes child elements with absolute positioning positioned based on the parent. New HTML:

<ulclass="tab"><li><aclass="tabimg gq-module-hover tilt"tabindex="0"data-about="Newborns"><imgsrc="http://debora.com.au/wp-content/uploads/2016/11/DEB_0095.jpg"alt=""><divclass="caption">Newborns</div></a></li><li><aclass="tabimg gq-module-hover"tabindex="1"data-about="Children"><imgsrc="http://debora.com.au/wp-content/uploads/2016/11/DEB_8252.jpg"alt=""><divclass="caption">Children</div></a></li><li><aclass="tabimg gq-module-hover"tabindex="2"data-about="Families"><imgsrc="http://debora.com.au/wp-content/uploads/2016/11/DEB_8607.jpg"alt=""><divclass="caption">Families</div></a></li><li><aclass="tabimg gq-module-hover"tabindex="3"data-about="Lifestyle"><imgsrc="http://debora.com.au/wp-content/uploads/2016/11/DEB_6620.jpg"alt=""><divclass="caption">Lifestyle</div></a></li></ul>

CSS:

.tabli {
  box-sizing: border-box;
  float: left;
  width: 25%;
  position: relative;
  /*Added*/
}
.tabli.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

I also removed all instances of text-align:center;