Html 水平和垂直对齐

我有n个div。我有

100%

宽度。我想将div水平居中对齐。行中的div数取决于div的大小

如果我设置了

child

div

250px

，那么对于例如，如果屏幕宽度为

1000px

，则只能水平放置3个div。[因为必须考虑div之间的边距]和左侧，右侧间距必须相等

我不能想出一个普遍的解决办法。有什么建议吗

我正在尝试设计响应性div

CSS:

text-align CSS属性描述如何在其父块元素中对齐像文本这样的内联内容。文本对齐不控制块元素的对齐，只控制它们的内联内容

因为我们有内容

display:inline块

它们被视为内联内容，因此

文本对齐

将其内容居中

---

虽然

float

属性“指定元素应从正常流中提取，并沿其容器的左侧或右侧放置”

您可以使用Flexbox执行此操作

.container{
宽度：100%；
保证金：0自动；
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
.孩子{
flex:075px；
边框：1px实心#F00；
高度：75px；
利润率：10px；
位置：相对位置；
}
.圆圈{
高度：25px；
宽度：25px；
边框：1px实心#0F0；
边界半径：50%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
}

---

您能否解释添加的属性如何帮助实现所需的解决方案？

.container {
    width: 100%;
    margin: 0 auto;
    display: table;
}

.child {
    width: 75px;
    border: 1px solid #F00;
    height: 75px;
    margin: 10px;
    float: left;
}

.circle {
    height: 25px;
    width: 25px;
    border: 1px solid #0F0;
    border-radius: 50%;
    margin: auto;
    top: 25%;
    position: relative;
}

.container{
  text-align:center; /* add this */

.child{
  display:inline-block; /*instead of float:left */