How to align a button to the center of a block?

Question

css

The block itself has the following structure:

<div class="col-blog">
 <img class="img-responsive" src="https://picsum.photos/264/167/" alt="image">
  <h3>
   <a href="">Fully compatible template</a>
   </h3>
   <hr>
   <p>
    Lorem est esse cupidatat in in ipsum non consectetur.
    Id veniam consectetur enim cillum incididunt in fugiat 
    cupidatat exercitation qui exercitation officia quis ea.
   </p>
   <a href="#">
    <button type="button" class="button">Read more</button>
   </a>
</div>

The button needs to be centered on the breakpoint. I did it like this:

.button {
margin-left: calc(50% - 48.5px);
}

where 48.5px is half the width of the button
. But this is a hack, not a solution. What is the right and best way to do it?

Answer 1

Place the button inside the center tag.

Answer 2

div.controlls
a.button
/div controls
{
display flex
justify-content center
align-items center
width 100%
}
Or like you have dom
a {
display block
button { margin: 0 auto}
}