JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <a class="center" href="https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically">
    <span class="underline">Center me</span> <span> <-- </span>
  </a>
</div>

SCSS

html, body {
  width: 100%;
  height: 100%;
}
.wrapper {
  background: rgba(0,0,0,0.3);
  width: 200px;
  height: 200px;
  display: flex;
}
.center {
  background: lightgreen;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}
span {
  display: inline-block;
  text-decoration: none;
}

a {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}