本文详解如何正确使用 CSS Grid 的 align-items 和 justify-content 实现多列图表项（如 li）在容器内真正居中对齐，避免因混淆 justify-items 与 justify-content 导致的偏移问题。
本文详解如何正确使用 css grid 的 `align-items` 和 `justify-content` 实现多列图表项（如 li）在容器内真正居中对齐，避免因混淆 `justify-items` 与 `justify-content` 导致的偏移问题。
在构建基于 <ul> + <li> 的网格化图表（例如柱状图、按钮阵列或数据可视化卡片）时，开发者常误用 Grid 的对齐属性，导致内容看似“居中”实则边缘留白不均，甚至出现元素重叠或错位。核心问题在于：justify-items 控制的是每个网格项（grid item）在其单元格内的对齐方式；而 justify-content 才控制整个网格轨道（grid tracks）在容器主轴方向上的整体居中。
你当前的代码中使用了 justify-items: center，这会让每个 <li> 在其分配到的 60px 宽列单元格内水平居中——但因 <li> 宽度（35px）小于列宽（60px），左右各留出 12.5px 空隙，叠加所有列后，整体图表区块会向右偏移，造成视觉上“离左边缘更远”的错觉（正如截图所示）。
✅ 正确解法是：
- 保留 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 避免紧贴 */
}⚠️ 注意事项：
- 务必清除 <ul> 默认的 padding-left（通常为 40px），否则 justify-content: center 会在已偏移的基础上再居中，加剧错位；
- 若需调整 <li> 间距，优先使用 gap（如 gap: 8px）而非 margin，避免破坏 Grid 布局流；
- 避免对 <li> 单独设置 position: absolute —— 这会使它们脱离 Grid 流，失去行列结构，导致全部堆叠于同一点（即你遇到的“融合成一个元素”的现象）；
- 若列数动态变化，建议改用 repeat(auto-fit, minmax(60px, 1fr))) 配合 justify-content: center，提升响应式鲁棒性。
总结：Grid 居中 = align-items（交叉轴） + justify-content（主轴）。牢记 items 作用于单个格子，content 作用于整个网格轨道——这是解决此类布局问题的关键认知分水岭。
