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

Posted 2023-03-05

【中文标题】如何在 CSS 网格布局中保持内容居中？

【英文标题】：How do I keep content centered in CSS Grid Layout?

【发布时间】：2019-10-30 08:37:33

【问题描述】：

使用 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 网格布局）

【问题讨论】：

你只是溢出，40% + 最小内容宽度（标题宽度）超过 100%

@TemaniAfif 是的。我想的代码有问题。我认为的代码在粉红色区域居中，但由于屏幕宽度等原因，它没有居中。您通常如何使用 CSS Grid Layout 解决这些（主要是overflow）问题？

只需将 minmax() 更改为 1fr，我真的不认为这里需要 20%

@TemaniAfif 如果你只使用1fr，当屏幕变小时，粉色区域会被版权文本向左推。这将使用minmax 函数，因为粉红色区域将不再是“真正的中心”。

因为您使用的是 strange 长字符串。添加一些空格就可以了。我不认为你真的会有这样的版权

【参考方案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>

【参考方案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>

【讨论】：

@bafeaski 让我知道您对此的看法，谢谢 :)