如何在 CSS Grid 容器中水平垂直居中图表项-html教程-PHP中文网

如何在 CSS Grid 容器中水平垂直居中图表项

本文详解如何正确使用 CSS Grid 的 align-items 和 justify-content 实现图表类元素在容器内的精准水平与垂直居中，避免因混淆 justify-items 与 justify-content 导致的布局偏移问题。

本文详解如何正确使用 css grid 的 `align-items` 和 `justify-content` 实现图表类 `

` 元素在容器内的精准水平与垂直居中，避免因混淆 `justify-items` 与 `justify-content` 导致的布局偏移问题。

在 CSS Grid 布局中，居中一个网格容器内的所有子项（如用于可视化图表的

列表项）需区分两个关键概念

：

align-items 控制单个网格项在其所在行（cross axis）上的对齐方式（即垂直方向）；
justify-content 控制整个网格内容区域（grid track area）在容器主轴（row axis）上的对齐方式（即水平方向）；
而 justify-items 是作用于每个独立网格项在各自单元格内的对齐，它不会让整组元素整体居中——这正是原代码中 justify-items: center 未达预期的根本原因。

✅ 正确做法是：

保留 align-items: center 实现垂直居中；
将 justify-items: center 替换为 justify-content: center，使整行网格轨道（columns）在容器宽度内水平居中；
同时确保容器有明确宽高（如 height: 300px），并移除可能干扰的 grid-auto-rows（除非需显式控制行高）。

以下是优化后的完整示例代码：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

#button-cash {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px; /* 4列固定宽度 */
  grid-auto-rows: 10vh; /* 可保留，但非居中必需 */
  align-items: center;     /* ✅ 垂直居中所有 li */
  justify-content: center; /* ✅ 水平居中整个网格内容区域 */
  list-style-type: none;
  width: 100%;
  height: 300px;
  padding: 0;              /* 关键！清除默认 ul 内边距 */
  margin: 0;               /* 防止外边距干扰 */
  background-color: rgb(159, 227, 236);
}

#button-cash li {
  width: 35px;
  height: 30px;
  background-color: rgb(65, 171, 185);
  /* 不需要 position: absolute —— Grid 已提供原生居中能力 */
}

⚠️ 注意事项：

勿滥用 position: absolute：为
单独设绝对定位会脱离文档流，导致所有元素重叠于同一点（即你看到的“融合成一个”效果），完全违背 Grid 布局初衷；
检查默认样式：
列数与内容匹配：当前定义了 4 列，但
共 16 个 → 自动换行生成 4 行 × 4 列网格。若需严格控制行列结构，可补充 grid-template-rows 或使用 grid-auto-flow: row dense；
响应式增强建议：可搭配 minmax() 与 auto-fit 实现自适应列数，例如：
```
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
```