Center a grid container vertically and horizontally

Instead of using

  align-items: center;
  justify-items: center;

you can use

  place-items: center;

.wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100vh;
        place-items: center;
        border: 2px solid;
       }

<div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

Instead of justify-content: center use justify-items: center.

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-items: center; /* adjusted */
}

<div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

In your second example, you say:

The following CSS centers the div horizontally but not vertically.

That's because the container has no extra height. The row is the height of the content. Instead of grid-template-rows: 1fr try something like grid-template-rows: 100vh.

.maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-content: center;
}

.centerthis {
  align-self: center;
  justify-self: center;
}

body {
  margin: 0;
}

<div class="maingrid">
  <div class="centerthis">loremloremlorem</div>
</div>

More here:

• What is the difference between align-items vs. align-content in Grid Layout?
• Centering in CSS Grid