Как я могу центрировать текст в сетке?

Question

Определенный текст не может быть помещен в центр в сетке CSS.

У меня есть сетка CSS, но текст "Post Manager", кажется, не идет по центру.Я превратил элементы сетки в гибкий контейнер, но, кажется, только этот текст не следует правилу.Любая мысль ценится.Спасибо.

body {
  font-family: sans-serif;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  width: 100vw;
  height: 100vh;
}

.gn {
  background-color: #7fd2f0;
  grid-row: 1 / 16;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotateZ(180deg);
}

.ab {
  background-color: #85fedd;
  grid-column: 2/16;
}

.pm {
  background-color: #f7f7f7;
  grid-row: 2/16;
  grid-column: 2/5;
  text-align: center;
}

.wp {
  background-color: #c6c6c6;
  grid-column: 6/16;
  grid-row: 2/16;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div class="center-text gn">Global Navigation</div>
  <div class="center-text ab">Application Bar</div>
  <div class="center-text pm">Post Manager</div>
  <div class="center-text wp">Writing Space</div>
</div>

Answer 1

попробуйте это.

.pm {
    grid-column: 2/6;
}