title: Bootstrap center content horizontaly and push/pull content
body: <p>I have a jsfiddle here: <a href="http://jsfiddle.net/hnfdf9y1/1/" rel="nofollow">http://jsfiddle.net/hnfdf9y1/1/</a></p>
  
  <p>It two rows with 2 cells each that contain text that is centered vertically.</p>
  
  <p>I need to center the white circle with the text horizontaly so it's centered in it's block</p>
  
  <p>This is espically important when the white circle is above the text and the blocks are 100%.</p>
  
  <p>I also need to push or pull the second row so when it breaks to 100% the white circle is above the text and not above like it is now.</p>
  
  <pre><code>        &lt;div class="container"&gt;
  
            &lt;div class="row"&gt;
                &lt;div class="block clearfix"&gt;
  
                    &lt;div class="col-sm-4  col-lg-3 col"&gt;
                        &lt;div class="circle"&gt;
                            &lt;p class="extract extract_percent"&gt;50%&lt;/p&gt;
                            &lt;p class="extract extract_fact"&gt;Some Text&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="col-sm-8  col-lg-9 col"&gt;
                        &lt;div class="text"&gt;
                           &lt;p class="fact"&gt;More text More text More text More text More text More text More text More text &lt;/p&gt;
                        &lt;/div&gt;    
                    &lt;/div&gt;
  
  
                    &lt;div class="col-sm-8  col-lg-9 col"&gt;
                        &lt;div class="text"&gt;
                           &lt;p class="fact"&gt;More text More text More text More text More text More text More text More text &lt;/p&gt;
                        &lt;/div&gt;    
                    &lt;/div&gt;
  
          &lt;div class="col-sm-4  col-lg-3 col"&gt;
  
  
          body{
              background: blue;
          }
  
          .col{
              border: 1px solid red;
          }
  
          .block{
              display: table;
              height: 120px;
          }
  
          .block .circle{
              background: white;
              border-radius: 140px;
              display: table-cell;
              vertical-align: middle;
              height: 140px;
              text-align: center;
              width: 140px;
          }
          .extract{
            color: $at-blue-dark;
            margin: 0;
          }
  
          .extract_percent{
            font-size: 2em;
            font-weight: bold;
          }
  
          .extract_fact{
            font-size: 1.1em;
          }
  
          .text{
            display: table-cell;
            vertical-align: middle;
            height: 140px;
          }
  
          .fact{
              color: white;
          }
  </code></pre>