Align Text Vertically Inside Grid Item

Question

Aligning text vertically is always tricky.

The Following table vertically aligns text inside a <td> tag. I would like the replicate this behavior using CSS grids.

This Code snippet shows text that is vertically aligned by default CSS table:

td {
  border: 2px solid red;
}

<table>
  <tr>
    <td>
      <pre>
        multi-line
        item
      </pre>
    </td>
    <td>Hello World</td>
  </tr>
</table>

This code implements CSS Grid but does not vertically center the text inside the <td> tag.

tr {
  display: grid; 
  grid-template-columns: auto auto; 
}

td {
  border: 2px solid red;
  vertical-align: middle; /* DOES NOT WORK */
  justify-content: center; /* DOES NOT WORK */ 
}

<table>
  <tr>
    <td>
      <pre>
        multi-line
        item
      </pre>
    </td>
    <td>Hello World</td>
  </tr>
</table>

Answer 1

Just figured it out.

Use align-self to align content inside CSS Grid item.

td {
   align-self: center;
}