What style is required by an <a/> to behave like a <button/> when using `margin: 0 auto` and without a parent with `text-align: center`?

Question

Note: Please don't suggest to add a parent with text-align: center because is not useful in this case.

Jsfiddle: https://jsfiddle.net/kkv687yv/

So let's say I have this html:

<a>my link</a>
<button>my button</button>

And this css:

a {
  margin: 0 auto;
  display: block;
  background: red;
  color: white;
}

button {
  margin: 0 auto;
  display: block;
  background: blue;
  color: white;
}

The output is:

But I would like to have this (dynamic width, not hardcoded or percentage)

Do you know what else do I need to set on the <a/> element to look like that?

Jsfiddle: https://jsfiddle.net/kkv687yv/

Note: Please don't suggest to add a parent with text-align: center because is not useful in this case.

Answer 1

add display table

a {
  background: red;
  color: white;
  margin: 0 auto;
  display:table;
  padding:2px 5px;
}

https://jsfiddle.net/kkv687yv/2/