title: horizontal center css circle in bootstrap column
body: <p>We try to center a CSS circle with a image and a label overlaying the circle. The circle should be horizontally centered in a bootstrap column. Goal is to have this circle always in the horizontal center. Any advise is welcome.</p>
  
  <p>Please see following <a href="http://jsfiddle.net/metaxos/b11nba98/1/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;&lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;div class="circle1Wrapper"&gt;
              &lt;div class="circle-textSmall bubble1outer"&gt;
                  &lt;div&gt; &lt;span class="bubbleIconSmall"&gt;
                          &lt;img src="http://lorempixel.com/40/40/" /&gt;
                      &lt;/span&gt;&lt;span class="bubbleHeadSmall"&gt;label&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>.circle1Wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 9999;
      margin: auto;
      border: 1px solid;
  }
  .bubble1outer {
      position: absolute;
  }
  .circle-textSmall div {
      width: 125px;
  }
  .circle-textSmall div {
      float: left;
      width: 250px;
      padding-top: 15%;
      line-height: 1em;
      margin-top: -0.5em;
      text-align: center;
      color: #000;
  }
  span.bubbleIconSmall &gt; img {
      width: 45%;
      height: auto;
  }
  .circle-textSmall:after {
      width: 125px;
      padding-bottom: 125px;
      margin-left: 50%;
  }
  .circle-textSmall:after {
      content:"";
      display: block;
      width: 250px;
      height: 0;
      padding-bottom: 250px;
      background: #ccc;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
  }
  </code></pre>
  
  <p>It should look like this: <img src="https://i.stack.imgur.com/HKVzu.png" alt="enter image description here"></p>