Responsive transparent overlapping css circles with text align vertical and center

Question

Can\'t seem to get my text to align center and vertical within each circle. Tried putting h1 text inside of another div - display table, but having problems containing text insi

Answer 1

add a wrapper div around your h1

    

Two lines 
&Two lines

and change the style like this:

.wrapper{
  margin-top:40%;
  height:100%;
  width:100%;
  display: table;
}

see here for a updated pen. http://codepen.io/anon/pen/yugBK