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

Question

我将开始说明我的问题。

你可以看到我有一个容器，里面有很多立方体元素，它们都向左浮动。但我遇到的问题是我不能将它们放在第二个容器的中心。绿线标记容器中的空白 space，因为元素向左浮动。但是我希望 space 不存在，或者以某种方式在容器的左侧也有一个相同的大小。总结一下，我希望它居中。我试过 flexbox 但只有上层容器居中，它仍然不是 100% 居中。我怀疑是因为每个立方体都有一个像素大小，但我不知道如何用其他方法做到这一点。

这是 fiddle 的 link 以及我当前代码的样子

https://jsfiddle.net/qajyzkhu/3/

    <div class="calendar-container">
  <div class="fieldsContainer">


    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>



  </div>
</div>

css

    .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;
  }

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

CSS unable to center big amount of float:left elements

html

css

css-float

flexbox