Center A <pre> Tag

Centering a <pre> tag in another element can be done by making the parent element use `display: grid;` and then `justify-self: center;` on the <pre> tag itself. For example, this HTML:

<div id="wrapper">
  <pre id="theCode">This is the content</pre>
</div>

and this CSS:

#wrapper {
  display: grid;
}
#theCode {
  justify-self: center;
}

produce this result:

This is the content

Notes

• I applied background colors and padding outside that aren't shows in the CSS snippets. They aren't necessary for the centering. They just help show the relationships
• This approach uses `justtify-center` on the pre element itself. I think you can also use `justify-content` in the `#wrapper` style but I haven't tested that yet.
• There are also `align-self` and `align-content` that can be used to center/adjust things vertically that can also be looked at