如何在网格中居中放置文本？

Question

特定文本不能放在CSS网格的中心。

我有一个CSS网格，但是文本“ Post Manager”似乎没有居中。我已将网格项放入flex容器，但是仅此文本似乎不遵循规则。任何想法表示赞赏。谢谢。

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;
}