Vertical aligning text - html

Question

I'm trying to vertically align some text in a div whilst the text is under an image.
I'm not very good at explaining things but this is the code I have so far: https://jsfiddle.net/c1249bd8/
HTML:
<div class="childContainer">
<a href="#" class="childLink">
<img src="http://placekitten.com/g/500/500" alt="Test" class="childImg"/>
<h1 class="childName">Testing</h1>
</a>
</div>
CSS:
.childContainer {
/* Height and width */
height: 10rem;
width: 10rem;
/* Hide overflow */
overflow: hidden;
/* Allows z-index */
position: relative;
/* Circle */
border-radius: 50%;
}
.childLink {
/* No default link styling */
color: #000;
text-decoration: none;
/* All Bubble is link */
height: 100%;
width: 100%;
/* Circle */
border-radius: 50%;
}
.childImg {
/* Full Bubble */
height: 100%;
width: 100%;
/* On top of text */
z-index: 1;
position: absolute;
/* Fade in/out stuff */
opacity: 1;
transition: opacity .30s ease-in-out;
-moz-transition: opacity .30s ease-in-out;
-webkit-transition: opacity .30s ease-in-out;
}
.childNameWrapper {
vertical-align: middle;
display: table-cell;
}
#import url('http://fonts.googleapis.com/css?family=Roboto:400,300|Luckiest+Guy');
.childName {
/* Behind Image */
position: absolute;
z-index: 0;
/* In Center */
text-align: center;
/* Nice handwriting font */
font-family: 'Luckiest Guy', cursive;
}
.childImg:hover {
/* Fade on hover */
opacity: 0;
transition: opacity .30s ease-in-out;
-moz-transition: opacity .30s ease-in-out;
-webkit-transition: opacity .30s ease-in-out;
}
Thanks,
Oscar.

Answer 1

Use display flex. It is quite easy and simple to use.
Check the FIDDLE.
.childLink {
display:flex;
align-items : center;
/* No default link styling */
color: #000;
position:relative;
text-decoration: none;
/* All Bubble is link */
height: 100%;
width: 100%;
/* Circle */
border-radius: 50%;
// vertical-align:middle;
}

Answer 2

change your 'childname' class to this:
.childName {
/* Behind Image */
position: relative;
z-index: 0;
line-height: 90px;
/* In Center */
text-align: center;
/* Nice handwriting font */
font-family: 'Luckiest Guy', cursive;
The trick here is the lineheight :)