本文详解如何正确使用 CSS Grid 的 align-items 和 justify-content 实现多列图表项（如 li）在容器内真正居中对齐，避免因混淆 justify-items 与 justify-content 导致的偏移问题。

本文详解如何正确使用 css grid 的 `align-items` 和 `justify-content` 实现多列图表项（如 li）在容器内真正居中对齐，避免因混淆 `justify-items` 与 `justify-content` 导致的偏移问题。

在构建基于

+
• 的网格化图表（例如柱状图、按钮阵列或数据可视化卡片）时，开发者常误用 Grid 的对齐属性，导致内容看似“居中”实则边缘留白不均，甚至出现元素重叠或错位。核心问题在于：justify-items 控制的是每个网格项（grid item）在其单元格内的对齐方式；而 justify-content 才控制整个网格轨道（grid tracks）在容器主轴方向上的整体居中。

  你当前的代码中使用了 justify-items: center，这会让每个

• 在其分配到的 60px 宽列单元格内水平居中——但因
• 宽度（35px）小于列宽（60px），左右各留出 12.5px 空隙，叠加所有列后，整体图表区块会向右偏移，造成视觉上“离左边缘更远”的错觉（正如截图所示）。

  ✅ 正确解法是：

  

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

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

  下载
  • 保留 align-items: center 实现垂直居中（控制行方向）；
  • 将 justify-items: center 替换为 justify-content: center 实现水平居中（控制整行网格轨道在容器宽度内的居中）；
  • 同时确保 grid-auto-rows 或显式 grid-template-rows 不影响布局逻辑（本例中可简化或移除，由 align-items: center 统一处理高度分布）。

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

  #button-cash {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px; /* 四列固定宽度 */
    grid-auto-rows: 10vh; /* 可保留，用于统一行高 */
    align-items: center;     /* 垂直居中：所有 li 在各自行内垂直居中 */
    justify-content: center; /* 水平居中：四列整体在容器中水平居中 */
    list-style-type: none;
    width: 100%;
    height: 300px;
    padding: 0;              /* 关键！清除 ul 默认 padding，避免干扰居中 */
    margin: 0;               /* 同样建议重置 margin */
  }
  li {
    width: 35px;
    height: 30px;
    background-color: rgb(65, 171, 185);
    /* 可选：添加 margin 或 gap 避免紧贴 */
  }

  ⚠️ 注意事项：

  • 务必清除
    默认的 padding-left
    （通常为 40px），否则 justify-content: center 会在已偏移的基础上再居中，加剧错位；
  • 若需调整
  • 间距，优先使用 gap（如 gap: 8px）而非 margin，避免破坏 Grid 布局流；
  • 避免对
  • 单独设置 position: absolute —— 这会使它们脱离 Grid 流，失去行列结构，导致全部堆叠于同一点（即你遇到的“融合成一个元素”的现象）；
  • 若列数动态变化，建议改用 repeat(auto-fit, minmax(60px, 1fr))) 配合 justify-content: center，提升响应式鲁棒性。

  总结：Grid 居中 = align-items（交叉轴） + justify-content（主轴）。牢记 items 作用于单个格子，content 作用于整个网格轨道——这是解决此类布局问题的关键认知分水岭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！