Is it possible to horizontally center an inline element without extra markup or styling parent containers?

Solution 1:

Try this - DEMO

a {
    display: table;
    margin: auto;
}

I personally try not to change an elements display type if at all possible, especially to something like 'table' for accessibility reasons.

The normal margin: 0 auto; trick does not work here unfortunately.

Hope this helps!

a {
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

<a href="#">Center Me</a>