CSS 无法将大量 float:left 元素居中

Question

我将开始说明我的问题。正如您所观察到的，我有一个容器，其中包含很多立方体元素，它们都向左浮动。但我遇到的问题是我无法将它们放在第二个容器中。绿线标记容器中存在的空白区域，因为元素向左浮动。但我希望该空间不存在，或者以某种方式在容器的左侧也有一个相同大小的空间。总结一下，我希望以它为中心。我尝试过 flexbox，但只有上部容器居中，它仍然不是 100% 居中。我怀疑这是因为每个立方体都有一个像素大小，但我不知道如何用其他方法来做到这一点。这是小提琴的链接以及我当前代码的外观https://jsfiddle.net/qajyzkhu/3/    .calendar-container{   background-color:rgb(151,203,228);    height:100vh;    overflow: scroll;    overflow-x: hidden;    display:flex;    justify-content: center;}.fieldsContainer{   width:90%;   }.cube-lived{    float: left;    width: 19px;    height: 19px;    border: 1px solid rgba(0, 0, 0, .2);    margin: 1px;    background-color: rgba(6,30,57);  }

Answer 1

用这个CSS修复它

    .calendar-container{

   background-color:rgb(151,203,228);

    height:100vh;

    overflow: scroll;

    overflow-x: hidden;

    display:flex;

    justify-content: center;

}

.fieldsContainer{

  width:90%;   

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));

  grid-auto-rows: 20px;

}

.cube-lived{

    float: left;

    border: 1px solid rgba(0, 0, 0, .2);

    margin: 1px;

    background-color: rgba(6,30,57);

  }

Answer 2

尝试使用CSS网格

display: grid;

.fieldsContainer{

   width:90%;   

   display: grid;

   grid-template-columns: repeat(auto-fit, 20px);

   grid-gap: 1px;

}

.cube-lived {

    background-color: rgba(6,30,57);

    height: 20px;

    width: 20px;

  }