Html CSS对齐小Div块

所以基本上我用div做了这些积木， 这是我的HTML：

    <div>
    <div class="cp" style="background-color: #FF6947;"></div>
    <div class="cp" style="background-color: #9400DE;"></div>
    <div class="cp" style="background-color: #16B5C9;"></div>
    <div class="cp" style="background-color: #0B399C;"></div>
    </div>
    <div>
    <div class="cp" style="background-color: #E3426A;"></div>
    <div class="cp" style="background-color: #ED1313;"></div>
    <div class="cp" style="background-color: #52E342;"></div>
    <div class="cp" style="background-color: #1BA30B;"></div>
    </div>

---

我已经尝试了很多边缘对齐策略和其他东西，以使每一行的区块对齐到中心，尽管我只是不能让我的头围绕它。有人能弄明白吗？非常感谢。

其中一个选项是为容器（如

.container

）指定类（或另一个标识符），并将内部内容的布局更改为内联，以便可以使用

文本对齐：居中
：

 .container { text-align:center; }

另一个选项是使用表格布局（
display:table
应用于
.container
，而
display:table cell
应用于内部内容）。然后，您可以使用
边距：0 auto
轻松将
.container
居中


不要让积木浮起来
使其显示：内联块
文本对齐：将父对象居中


#父级{
文本对齐：居中；
}
.cp{
显示：内联块；
宽度：30px；
高度：30px；
利润率：10px；
}
试着这样使用：

HTML:

对谢谢你所有的解决方案，我非常感激。很高兴能帮助你！请按回答做标记。
 .container { text-align:center; }

#parent {
    text-align: center;
}
.cp {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 10px;
}


<div id="parent">
  <div class="cp" style="background-color: #FF6947;"></div>
  <div class="cp" style="background-color: #9400DE;"></div>
  <div class="cp" style="background-color: #16B5C9;"></div>
  <div class="cp" style="background-color: #0B399C;"></div>
  <div class="cp" style="background-color: #E3426A;"></div>
  <div class="cp" style="background-color: #ED1313;"></div>
  <div class="cp" style="background-color: #52E342;"></div>
  <div class="cp" style="background-color: #1BA30B;"></div>
</div>

<div class="center">
    <div class="cp" style="background-color: #FF6947;"></div>
    <div class="cp" style="background-color: #9400DE;"></div>
    <div class="cp" style="background-color: #16B5C9;"></div>
    <div class="cp" style="background-color: #0B399C;"></div>
</div>

.center {
    margin:0 auto;
    display:block;
    text-align:center;
}

.cp {
    /* these styles will let the divs line up next to each other
       while accepting dimensions  float: left;*/
    display: inline-block;
    width: 30px;
    height: 30px;
    background: black;
    /* a small margin to separate the blocks */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}