如何使内容在CSS网格布局中居中？

Question

使用CSS Grid Layout，我创建了一个站点，其布局会随着屏幕尺寸的变化而有所变化。

在这里，为了将内容（粉红色区域）保留在CSS Grid Layout的中央，我进行了以下样式设置。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  color: #fff;
}

.bg {
  background-color: #6c757d;
}

footer {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
  grid-template-rows: repeat(3, auto);
}

h1,
dl {
  grid-column: 2;
  background-color: pink;
}

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  p.h6 {
    grid-column: 2;
  }
}

body>p {
  text-align: center;
}

<footer class="bg text">
  <h1>
    heading
  </h1>
  <dl class="h6">
    <dt>word1</dt>
    <dd>desc1</dd>
    <dt>word2</dt>
    <dd>desc2</dd>
  </dl>
  <p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>&#8593;<br>true center</p>

当宽度较宽时，这似乎工作得很好，但是当宽度较小时，粉红色区域会偏离“真中心”。

这也表明，minmax (20%, 1fr)不工作很好。

如何使该粉红色区域居中？另外，有没有比我上面想的更好的方法？（带有CSS网格布局）