How can i get my button to align in the center? - html

Question

I made some cards and i want to center the button. The only thing is, whatever I do the button stays at the start. And when i display the button as a flex or a block, it expands to full width. Can someone help me out?
The H3 does perfectly align in the center. I can't figure out why the button stays at exactly the same spot.
.index-cards .container {
display: flex;
justify-content: center;
align-items: center;
}
.index-cards .card {
padding: 0;
margin: 10px;
border-radius: 10px;
}
.index-cards .card-image {
height: 240px;
background-size: cover;
border-radius: 10px;
}
.index-cards .card-1 {
background-image: url(https://via.placeholder.com/500&text=1);
}
.index-cards .card-2 {
background-image: url(https://via.placeholder.com/500&text=2);
}
.index-cards .card-3 {
background-image: url(https://via.placeholder.com/500&text=3);
}
.index-cards p {
margin: 0 15px;
}
.index-cards h3,
.index-cards a {
text-align: center;
}
<section class="index-cards my-150px">
<div class="container">
<div class="card">
<div class="card-image card-1"></div>
<h3 class="my-30px">Sportscholen</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
Sportschool zoeken
</div>
<div class="card">
<div class="card-image card-2"></div>
<h3 class="my-30px">Nieuw bij FP30</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
Eerste keer
</div>
<div class="card">
<div class="card-image card-3"></div>
<h3 class="my-30px">Contact</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
Contact opnemen
</div>
</div>
</section>

Answer 1

I created a new class text-center and wrapped the <a> inside this new div. The reason the heading was centering but not the anchor. Because on heading is CSS display: block; is applied by default and taking the full width.
.index-cards .container {
display: flex;
justify-content: center;
align-items: center;
}
.index-cards .card {
padding: 0;
margin: 10px;
border-radius: 10px;
}
.index-cards .card-image {
height: 240px;
background-size: cover;
border-radius: 10px;
}
.index-cards .card-1 {
background-image: url(https://via.placeholder.com/500&text=1);
}
.index-cards .card-2 {
background-image: url(https://via.placeholder.com/500&text=2);
}
.index-cards .card-3 {
background-image: url(https://via.placeholder.com/500&text=3);
}
.index-cards p {
margin: 0 15px;
}
.index-cards h3,
.index-cards a {
text-align: center;
}
.text-center{
text-align: center;
}
<section class="index-cards my-150px">
<div class="container">
<div class="card">
<div class="card-image card-1"></div>
<h3 class="my-30px">Sportscholen</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
<div class="text-center">Sportschool zoeken</div>
</div>
<div class="card">
<div class="card-image card-2"></div>
<h3 class="my-30px">Nieuw bij FP30</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
<div class="text-center">Eerste keer</div>
</div>
<div class="card">
<div class="card-image card-3"></div>
<h3 class="my-30px">Contact</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
<div class="text-center">Contact opnemen</div>
</div>
</div>
</section>

Answer 2

Remove the .index-cards a add separately
.index-cards h3,
.index-cards a {
text-align: center;
}
Add This:
.index-cards a {
text-align: center;
display: block;
}