title: Unable to center image with position absolute
body: <p>On my image I have a progress bar in svg that wraps around image. How ever when I try and center the image it does not go into the middle. The svg does but not the image.</p>
  
  <p>Question: How is it possible to make the img and svg be in middle of column.</p>
  
  <p>Codepen Example <a href="http://codepen.io/wolfgang1983/pen/qaLNXv" rel="nofollow">Here</a> </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="column-module"&gt;
                  &lt;div class="profile-module-info"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-3"&gt;
                              &lt;div class="profile-avatar"&gt;
                                  &lt;div class="image"&gt;
                                  &lt;img data-src="holder.js/154x154" width="154" height="154" class="img-circle img-thumbnail" /&gt;
                                  &lt;/div&gt;
                                  &lt;svg class="mi-progressbar"&gt;
                                      &lt;circle id="circle" r="25%" cx="50%" cy="50%" stroke-width="10"&gt;&lt;/circle&gt;
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-6"&gt;
  
                          &lt;/div&gt;
                          &lt;div class="col-lg-3"&gt;
                              &lt;div class="profile-statistics"&gt;
                              &lt;ul class="list-unstyled"&gt;
                                  &lt;li&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      background-color: #F0F0F0;
  
  }
  
  .container  {
    margin-top: 40px;
  }
  
  .column-module {
      background: #fff none repeat scroll 0 0;
      border-radius: 4px;
      min-height: 100px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
      margin-bottom: 20px;
  }
  
  .column-module .column-module-heading {
      border-bottom: 1px solid #dedede;
      padding: 20px;
  }
  
  
  .column-module .column-module-heading {
      border-bottom: 1px solid #dedede;
      padding: 20px;
  }
  
  .column-module .column-module-heading .column-module-title {
      color: #1f2836;
      font-size: 18px;
      font-weight: bold;
  }
  
  
  .btn-group{
      display: flex;
  }
  
  .profile-avatar {
     border: 1px solid #bec0c2;
       position: relative;
       text-align: center;
    margin-left: 2rem;
    margin-top: -2rem;
    margin-bottom: 2rem;
  }
  
  .profile-avatar svg {
      position: relative;
      transform: rotate(-90deg);
      fill: none;
      stroke: #337ab7;
      stroke-dasharray: 0 0;
  }
  
  .profile-avatar img {
        position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      z-index: 1;
  }
  
  svg circle.progress-bar-success{
      stroke:#5cb85c;
  }
  svg circle.progress-bar-info{
      stroke:#5bc0de
  }
  svg circle.progress-bar-warning{
      stroke:#f0ad4e;
  }
  svg circle.progress-bar-danger{
      stroke:#d9534f;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      margin: 0;
      padding: 0;
  }
  
  a {
      cursor: pointer;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pncIm.png" rel="nofollow"><img src="https://i.stack.imgur.com/pncIm.png" alt="enter image description here"></a></p>