title: Proper way to center an absolute button within a relative parent container
body: <p>I've achieved the result I want. But it's not the correct way to do it. For example if my parent container ever changes widths, this hack won't work. However I did this just to get it on the screen to try and resolve the correct way in the browser.</p>
  
  <p><a href="https://i.stack.imgur.com/ZeAfO.png" rel="nofollow noreferrer">See screenshot here</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="product-wrapper"&gt;
                              &lt;div class="product-card"&gt;
                                  &lt;a href="lathes-single.html" class="product-img-wrapper"&gt;&lt;img src="../assets/img/46-455.jpg" alt=""&gt;&lt;/a&gt;
                                  &lt;h4&gt; 46-460 12 1/2 in. Variable Speed MIDI-LATHE® &lt;/h4&gt;
                                  &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                                  &lt;a href="lathes-single.html" class="btn btn-lg btn-primary"&gt;View Product&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Sorry about my wacky spacing. For some reason pasting out of Sublime Text 3, everything is all jacked up once it comes here.</p>
  
  <p>Related CSS</p>
  
  <pre><code>.product-img-wrapper {
     text-align: center;
  }
  
  .product-img-wrapper img {
      width: 200px;
      height: 200px;
  }
  
  .product-wrapper {
      position: relative;
      margin: 50px 0;
  }
  
  .product-card {
      position: relative;
      max-width: 330px;
      height: 450px;
      border: 1px solid #eee;
      margin: 25px auto 0 auto;
      text-align: center;
      padding-left: 20px;
      padding-right: 20px;
      box-shadow: 7px 7px 5px #838485;
   }
  
  .product-card .btn {
      position: absolute;
      min-width: 200px;
      bottom: 15px;
      left: 60px;
   }
  </code></pre>