Centering the link as the button

Answer 1

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

  Link


  Button

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

  Link


  Button

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

  Link


  Button