如何在Grid容器中水平垂直居中图表li元素？

问题分析 #

你之前的两种尝试问题出在：

1. 使用align-items: center和justify-items: center无效，大概率是Grid容器未设置足够的尺寸（仅包裹内容时无多余空间实现居中），或混淆了「单元格内元素居中」与「整个网格布局在容器内居中」的属性差异；
2. 给li设置position: absolute会让所有元素脱离文档流，自然会重叠，完全违背Grid布局的排版逻辑。

正确实现方式 #

根据你的需求（让li组成的图表整体在ul#button-cash内居中），分两步处理：

1. 确保Grid容器有明确尺寸

首先给ul#button-cash设置宽高（根据实际场景调整，比如占满父容器或固定尺寸），同时清除默认列表样式：

#button-cash {
  /* 示例：固定尺寸，或用100%/100vh适配父容器 */
  width: 400px;
  height: 400px;
  /* 清除ul默认样式 */
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* 定义网格行列（根据你的图表结构调整） */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px; /* 网格项间距 */
}

2. 选择对应居中属性

根据你的需求选择：

• 需求A：整个图表（所有li组成的网格）在容器内居中
  使用place-content: center（等同于justify-content: center + align-content: center），作用是让整个网格布局在容器的可用空间内居中：

  #button-cash {
    /* 其他属性同上 */
    place-content: center;
  }
  

• 需求B：每个li在各自的网格单元格内居中
  使用place-items: center（等同于align-items: center + justify-items: center），作用是让单个网格项在单元格内居中：

  #button-cash {
    /* 其他属性同上 */
    place-items: center;
  }
  

完整示例代码

<ul id="button-cash">
  <li>图表项1</li>
  <li>图表项2</li>
  <li>图表项3</li>
  <li>图表项4</li>
  <li>图表项5</li>
  <li>图表项6</li>
</ul>

/* 让容器在页面中先居中（可选，根据你的布局需求） */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#button-cash {
  width: 400px;
  height: 400px;
  border: 1px solid #ddd; /* 方便查看容器边界，可删除 */
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  /* 实现整个图表在容器内居中 */
  place-content: center;
}

#button-cash li {
  width: 80px;
  height: 80px;
  background: #f5f5f5;
  border-radius: 4px;
  /* 让li内部内容居中（可选） */
  display: flex;
  justify-content: center;
  align-items: center;
}

关键注意点 #

• 必须保证Grid容器的尺寸大于图表本身的尺寸，否则place-content: center不会有明显效果；
• 不要混用绝对定位和Grid布局，Grid本身自带完善的排版和居中机制，无需脱离文档流。

内容的提问来源于stack exchange，提问作者PensCom