如何在网格框中水平和垂直居中图表项目

Question

我已经花了两个小时，但还没有找到解决方案

我有几个

li

项目，它们一起代表我的

ul

网格容器中的图表

 <ul id="button-cash">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
          
</ul>

#button-cash {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px;
  grid-auto-rows: 10vh;
  align-items: center;
  justify-items: center;
  list-style-type: none;
  width: 100%;
  height: 300px;
  
}

li {
 width: 35px;
 height: 30px;
 background-color: rgb(65, 171, 185);
}

#price-screen, #button-cash, #cash-in-drawer {
   background-color: rgb(159, 227, 236);
}

我希望这个图表是集中的，所以我尝试将这些属性添加到我的网格框中

  align-items: center;
  justify-items: center;

但我得到了这个结果

图表稍微远离我的容器边缘

所以我认为制作我的网格容器会更聪明

position: relative;

当我将以下 css 添加到我的 li 图表时

position: absolute;
top: 50%;
bottom: 50%;
transform(50%, -50%);

它有效，但我得到了这个结果 所有

li

在集中时融合成一个元素

我相信这个问题的解决方案非常简单，但我无法找出它是什么

Answer 1

我添加了 justify-content: center 使其居中而不是 justify-items。让我知道这是否是您的意思

#button-cash {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px;
  grid-auto-rows: 10vh;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  width: 100%;
  height: 300px;
  
  
}

li {
 width: 35px;
 height: 30px;
 background-color: rgb(65, 171, 185);
}

#price-screen, #button-cash, #cash-in-drawer {
   background-color: rgb(159, 227, 236);
}

<ul id="button-cash">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
          
</ul>