Centering the link as the button

Answer 1

What you can do is to change display: block to display: inline-block instead then add text-align: center to their parents instead of margin: 0 auto as follow:

.button {
  display: inline-block;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center; 
}

div {
  text-align: center;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

Answer 2

You can add max-width/width properties and box-sizing:border-box to make them behave the same :

.button {
  display: block;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center;
  max-width: 200px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

You can also try fit-content value of width. Simply pay attention to browser support: https://caniuse.com/#search=fit-content

.button {
  display: block;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center;
  width: fit-content;
  box-sizing: border-box;
  margin: 0 auto;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

Another idea is to change the display:block to display:table and both links and buttons will behave the same :

.button {
  display: table;
  text-decoration: none;
  color: #103d82;
  background: #fff;
  border: 1px solid #d2cfcd;
  font-size: 1.4rem;
  line-height: 1;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  margin: 0 auto;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>

Answer 3

Try This:

* {
   box-sizing: border-box;
}

div {
   width: 100px;
   position: relative;
   margin: 0 auto;
}

.button {
   width: 100%;
   display: block;
   text-decoration: none;
   color: #103d82;
   background: #fff;
   border: 1px solid #d2cfcd;
   font-size: 1.4rem;
   text-align: center; 
   padding: 10px;
}

<div>
  <a href="#" class="button">Link</a>
</div>
<div>
  <button type="button" class="button">Button</button>
</div>