Flexbox - center text vertically

In your .tile delcaration, you need the flexbox code as follows:

justify-content: center;
display: flex;
align-items: center;

You LI declaration should just be display:block as it is not using the flexbox properties.

main {
  height: 200px;
  width: 200px;
}
a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  height: 100%;
}

<main>
  <a href="/">
    <div class="tile">Text</div>
  </a>
</main>

Tags:

Html

Css

Centering

Flexbox

Related