Align button at bottom of floating div - html

Question

I have an overview page with tiles and I use the matchheight library to dynamically determine the height of a row. Now I would like to align the 'more' buttons at the bottom of the div so that it doesn't look as messy as in the screenshot on smaller screens.
I tried making the button "position: absolute" with "bottom: 20px" and "left: 40%" but that causes problems with responsiveness. On some resolutions that's okay, but on other's the button is too far to the right.
Can I solve this in a nice way without having to use the media attribute for each resolution?
/* Block: Overview */
#overview {
padding-top: 50px;
width: 100%;
}
.overview {
text-align: center;
padding-bottom: 50px;
}
.overview img {
width: 100%;
vertical-align: middle;
padding-bottom: 30px;
}
.card-title {
text-align: center;
letter-spacing: -1px;
font-weight: 600;
font-size: 20px;
}
.card-subtitle {
margin-bottom: 0;
font-style: italic;
font-weight: 400;
font-size: 15px;
font-family: "Lora", serif;
color: #cccccc;
margin-top: -1rem;
line-height: 1.7857;
padding-bottom: 1rem;
text-align: center;
}
.btn-card {
background-color: #cccccc;
border-color: #404040;
color: #404040;
letter-spacing: 2px;
padding: 10px 20px;
horiz-align: center;
position: relative;
margin-bottom: 0;
}
.btn-card:hover {
background-color: #ffffff;
color: #404040;
border-color: #404040;
letter-spacing: 2px;
padding: 10px 20px;
}
<div class="col-sm-3 overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Heavy Entertainment Show" src="/images/discography/the-heavy-entertainment-show-1.jpg">
</div>
<h3 class="card-title">Heavy Entertainment Show</h3>
<h4 class="card-subtitle">November 4<sup>th</sup>, 2016</h4>
<a href="/album/the-heavy-entertainment-show/" title="Show details of Heavy Entertainment Show">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Under the Radar Vol 1" src="/images/discography/under-the-radar-vol-1-1.jpg">
</div>
<h3 class="card-title">Under the Radar Vol 1</h3>
<h4 class="card-subtitle">December 1<sup>st</sup>, 2014</h4>
<a href="/album/under-the-radar-vol-1/" title="Show details of Under the Radar Vol 1">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Swings Both Ways" src="/images/discography/swings-both-ways-1.jpg">
</div>
<h3 class="card-title">Swings Both Ways</h3>
<h4 class="card-subtitle">November 18<sup>th</sup>, 2013</h4>
<a href="/album/swings-both-ways/" title="Show details of Swings Both Ways">
<button class="btn btn-card">MORE</button>
</a>
</div>
<div class="col-sm-3 overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="Take the Crown" src="/images/discography/take-the-crown-1.jpg">
</div>
<h3 class="card-title">Take the Crown</h3>
<h4 class="card-subtitle">November 2<sup>nd</sup>, 2012</h4>
<a href="/album/take-the-crown/" title="Show details of Take the Crown">
<button class="btn btn-card">MORE</button>
</a>
</div>

Answer 1

This is the correct solution, adding a "transform:translateX(-50%);" for alignment. Thanks for the help!
.btn-card {
background-color: #cccccc;
border-color: #404040;
color: #404040;
letter-spacing: 2px;
padding: 10px 20px;
position: absolute;
bottom: 0;
left: 50%;
transform:translateX(-50%);
margin-bottom: 20px;