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

Something like this.. first add a circle class

  

    
  
      
Two lines 
&Two lines
    
    etc. 

then set a height on the containing element

#circle-wrapper{
    position:relative;
    top:0;
    left:0; 
    height: 1200px;
}

and also on .circle and h1...

.circle, h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 400px;
  width: 400px;
}

http://codepen.io/anon/pen/GnLJK