Proper way to center an absolute button within a relative parent container - html

Question

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.
See screenshot here
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="product-wrapper">
<div class="product-card">
<img src="../assets/img/46-455.jpg" alt="">
<h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
View Product
</div>
</div>
</div>
</div>
</div>
Sorry about my wacky spacing. For some reason pasting out of Sublime Text 3, everything is all jacked up once it comes here.
Related CSS
.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;
}

Answer 1

use this on your .btn instead. This will make your btn center horizontally.
css3: translateX to center element horizontally:
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);

Answer 2

As I said in my comment, make a wrapper for the button and position:absolute; that to the bottom. Then as long as you remove the styles from the button, it'll center itself because the wrapper has text-align:center; on it.
.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 .card-bottom {
position: absolute;
bottom: 15px;
width:100%;
left:0;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="product-wrapper">
<div class="product-card">
<img src="../assets/img/46-455.jpg" alt="">
<h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="card-bottom">View Product</div>
</div>
</div>
</div>
</div>
</div>