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

    <div class="circle1 transparent_class">
<div class="wrapper"><h1>Two lines <br />&amp;Two lines</h1>
</div>
</div>

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

Answer 2

Something like this.. first add a circle class

  <div id="circle-wrapper">
    <div class="circle circle1 transparent_class">  
      <h1>Two lines <br />&amp;Two lines</h1>
    </div>
    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