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

使用CSS网格布局，我创建了一个网站，它的布局随着屏幕大小的变化而变化

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

*{
保证金：0；
填充：0；
框大小：边框框；
}
.文本{
颜色：#fff；
}
.bg{
背景色：#6c757d；
}
页脚{
宽度：100%；
显示：网格；
网格模板列：最小值（20%，1fr）自动最小值（20%，1fr）；
网格模板行：重复（3，自动）；
}
h1，
dl{
网格柱：2；
背景颜色：粉红色；
}
p、 h6{
网格行：3；
网格柱：3；
溢出包装：断开单词；
}
@介质（最大宽度：800px）{
p、 h6{
网格柱：2；
}
}
身体>p{
文本对齐：居中；
}

标题
字1
描述1
字2
描述2
版权所有（C）looooooogtext
↑
真正居中

您可以使用

网格模板柱：1fr auto 1fr

来居中中间柱。现在在

p.h6

上添加

min width:0

，这样您就可以覆盖网格项的默认

min width:auto

，以使其缩小到超过内容大小（溢出值不可见也有效）-这允许

overflow wrap:break word

生效。请参见下面的演示：

*{
保证金：0；
填充：0；
框大小：边框框；
}
.文本{
颜色：#fff；
}
.bg{
背景色：#6c757d；
}
页脚{
宽度：100%；
显示：网格；
网格模板列：1fr auto 1fr；/*已更改*/
/*网格模板行：重复（3，自动）；p{
文本对齐：居中；
}

标题
字1
描述1
字2
描述2
版权所有（C）looooooogtext
↑；
真中心

看看这个规则：

p.h6{
网格柱：3；
}

当视口的宽度超过800px时，p.h6元素中的文本，即：“版权（C）OOOOOOOOOOGTEXT”

占据最右边的一列，即网格列3。中间的粉红色框可能非常小。这是因为您已将页脚元素的

网格模板列设置为：

网格模板列：最小值（20%，1fr）自动最小值（20%，1fr）；

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

现在，当视口小于800px时，版权文本移动到第二列或中间列：

@介质（最大宽度：800px）{
p、 h6{
网格柱：2；
}
}

这将强制该列的
auto
宽度为“looooongtext”的整个宽度。这就是当您将其缩小得太小时，它会溢出视口的原因

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

footer>*{
溢出包装：断开单词；
溢出：隐藏；
}

两者都进入
最大宽度：800px
媒体查询。演示：


*{
保证金：0；
填充：0；
框大小：边框框；
}
.文本{
颜色：#fff；
}
.bg{
背景色：#6c757d；
}
页脚{
宽度：100%；
显示：网格；
网格模板列：最小值（20%，1fr）自动最小值（20%，1fr）；
网格模板行：重复（3，自动）；
}
h1，
dl{
网格柱：2；
背景颜色：粉红色；
}
p、 h6{
网格行：3；
网格柱：3；
溢出包装：断开单词；
}
@介质（最大宽度：800px）{
p、 h6{
网格柱：2；
}
页脚{
网格模板柱：1fr 1fr 1fr；
}
页脚>*{
溢出包装：断开单词；
溢出：隐藏；
}
}
身体>p{
文本对齐：居中；
}

标题
字1
描述1
字2
描述2
版权所有（C）looooooogtext
↑；
真实中心
你只是有溢出，40%+最小内容宽度（标题宽度）超过100%@Temaniaf如果是的话。我认为代码有问题。我认为代码集中在粉红色区域，但由于屏幕宽度等原因，它没有集中。你通常如何解决这些问题（主要是
溢出
）CSS网格Laylout的问题？只需更改minmax（）仅通过
1fr
，我并不认为需要
20%
here@TemaniAfif如果只使用
1fr
，屏幕越小，粉红色区域将被版权文本推到左侧。这将使用
minmax
功能，因为粉红色区域将不再是“真正的中心”。因为您使用的是一个奇怪的长字符串。添加一些空格就可以了。我认为您不会真的有这样的字符串copyright@bafeaski让我知道你对此的想法，谢谢：）