Vertically align text inside container

HTML

<div class="bubble bubble-sml">
    <div class="middle">Lorem ipsum</div>
</div>

<div class="bubble bubble-mid">
    <div class="middle">Aliquam id purus et nunc pharetra</div>
</div>

<div class="bubble bubble-lrg">
    <div class="middle">In magna lectus, ullamcorper et elementum vitae, suscipit fringilla nisl.</div>
</div>

<div class="bubble bubble-lrg">
    <div class="middle">Nunc volutpat bibendum odio, tempus dapibus justo sollicitudin non. Aenean laoreet.</div>
</div>

SCSS

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

.bubble { 
    display: table;
    background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    text-align: center;
    color: #fff;

  -webkit-border-radius: 50%;
          border-radius: 50%;

  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.bubble-sml {
    width: 100px;
    height: 100px;  
}

.bubble-mid {
    width: 120px;
    height: 120px;   
}

.bubble-lrg {
    width: 160px;
    height: 160px;  
}

.middle {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px;
}