Centering the link as the button - css

Question

.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;
}
div .button {
margin: 0 auto;
}
<div>
Link
</div>
<div>
<button type="button" class="button">Button</button>
</div>
My two elements have the same CSS, however button is centered and not my link.
How to do the width of the link is calculated in the same way as the button?
Is it possible without added properties to the container?
Thanks

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;
}
<div>
Link
</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>
Link
</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>
Link
</div>
<div>
<button type="button" class="button">Button</button>
</div>

Answer 2

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>
Link
</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>
Link
</div>
<div>
<button type="button" class="button">Button</button>
</div>