Как выровнять button по центру блока?

Question

[uRoot]

Сам блок имеет следующую конструкцию:

<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>

Центрировать button необходимо на брекпоинте. Я сделал это следующим образом:

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

где 48.5px - это половина ширины кнопки
Но это костыль, а не решение. Как это правильно и лучше сделать?

Answer 1

[Наим Махкамов]

Поместите button внутри тега center.

Comments

[uRoot]

Мне центрировать нужно на брекпоинте. Куда я тег center помещу?

Answer 2

[Fedor Rychkov]

div.controlls
a.button
/div

controlls {
display flex
justify-content center
align-items center
width 100%
}

Или как у вас dom
a {
display block
button { margin: 0 auto}
}