Html 如何水平居中<；部门>；在容器中，如果线不完整，则保持它们向左对齐

如果行不完整，我想将

innerContainer

置于内部

outerContainer

的中心，同时将多个

内部

innerContainer

与左侧对齐

我也希望容器是流体，并始终保持居中

像这样

还是这个

我尝试了使用和不使用

flexbox

。我愿意接受所有建议。这是我的代码示例

即使我将

宽度

放在

内部容器

上，它也不总是居中

.outerContainer{
显示器：flex；
证明内容：中心；
边框：3倍纯黑；
}
.innerContainer{
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
宽度：80%；/*并非在所有情况下都保持居中*/
边框：3倍纯红；
}
.insideDiv{
利润率：20px；
宽度：250px；
最小高度：100px；
边框：1px纯绿色；
}

---

您不需要使用

flexbox

将

块级元素

水平居中，例如

框

。这可以通过使用

margin:0 auto轻松完成

我将您的innerbox更改为
display:grid我将其与
重复（自动填充，最小值（100px，1fr））一起使用为了演示，我把你的250px改为100px。这条线将容纳尽可能多的具有该宽度的框，并稍微调整它们的大小，以避免浪费空白空间。此外，我还从这些框中删除了类，并直接使用CSS对它们进行寻址


.outerContainer{
边框：3倍纯黑；
}
.innerContainer{
保证金：0自动；
宽度：80%；
边框：3倍纯红；
填充：20px；
显示：网格；
网格模板列：重复（自动填充，最小值（100px，1fr））；
栅隙：20px；
}
.innerContainer>div{
最小高度：60px；
边框：1px纯绿色；
}

你也需要支持IE吗？@Tacosh不，我不需要支持IE