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

Question

使用 CSS 网格布局，我创建了一个网站，其布局会随着屏幕大小而略有变化。

在这里，为了将内容（粉红色区域）保持在 CSS 网格布局的中心，我做了以下样式。

* {
  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 网格布局）

Answer 1

看看这条规则：

p.h6 { grid-column: 3; }

当视口宽度超过800px时，p.h6元素中的文本，即：“COPYRIGHT(C)looooooooooooooooooooooooongtext”

占据了最右边的列，网格列 3。中心的粉红色框可以非常小。这是因为您已将页脚元素的 grid-template-columns 设置为：

grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);

换句话说，粉色框周围的列应尽可能大（1fr），而粉色框应尽可能小（自动，或内部文本的宽度）。

现在，当视口小于小于 800 像素时，版权文本将移至第二列或中间列：

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

这会强制该列的auto 宽度为“loooooooongtext”的整个宽度。这就是为什么当你把它缩小得太小时它会溢出视口。

您可以通过将两个属性值添加到页脚的直接子级来解决此问题：

footer > *{ overflow-wrap: break-word; overflow: hidden; }

两者都进入max-width: 800px 媒体查询。演示：

* {
  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;
  }
  
  footer{
    grid-template-columns: 1fr 1fr 1fr;
  }
  footer > *{
    overflow-wrap: break-word;
    overflow: hidden;
  }
}

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>

Answer 2

您可以使用grid-template-columns: 1fr auto 1fr 使中间列居中。现在在 p.h6 上添加 min-width: 0 以便覆盖 grid items 的默认 min-width: auto 以允许它缩小过去的内容大小（overflow 值而不是可见也有效） - 这允许overflow-wrap: break-word 生效。请参阅下面的演示：

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

.text {
  color: #fff;
}

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

footer {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* changed */
  /*grid-template-rows: repeat(3, auto); <-- redundant */
}

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

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
  min-width: 0; /* added */
}

@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>