Html 尝试将两组2个div（每组2个div）放在包装的中间

我有四个div（大小都相同），我将它们分组为两个块，其中class

blocka

都包含在一个内部容器中

body content

将所有块向左浮动，因此当我的页面宽度改变时，这些块（2个）彼此对齐。 我现在想知道的是，这些div正好位于

主容器的中间

一切反应都很好。我需要的是类<代码>正文内容<代码>坐在<代码>主< <代码>的中间，而<代码> BLASKA所有都位于“代码>正文内容< /代码> < /P>的中间。

.main{
最大宽度：100%；
左边距：240px；
背景色：；
}
.正文内容{
背景色：白色；
保证金：0自动；
宽度：95%；
填充：15px；
边框：1px纯灰；
高度：100px；
}
B.布洛克{
浮动：左；
保证金：0自动；
}

全部加上
全部加上
全部加上
全部加上
尝试以下操作：


.main{
最大宽度：100%；
背景色：；
文本对齐：居中；
}
.正文内容{
背景色：白色；
保证金：0自动；
宽度：95%；
填充：15px；
边框：1px纯灰；
高度：100px；
}
B.布洛克{
保证金：0自动；
显示：内联块；
}

全部加上
全部加上
全部加上
全部加上
您考虑过flexbox吗


正文{
保证金：0；
}
.正文内容{
显示器：flex；
最小高度：100vh；
证明内容：中心；
对齐项目：居中；
}
B.布洛克{
显示器：flex；
弯曲方向：立柱；
}
.正文内容项目{
最小宽度：35vw；
最小高度：35vh；
保证金：5px；
背景色：#F5；
填充：1rem；
框大小：边框框；
}

全部加上
全部加上
全部加上
全部加上
我不太明白，请澄清

<>这里，<代码>正文内容位于“代码>主< <代码>的中间，而<代码> BLASKA位于“代码>正文内容< /代码>的中间。你没有说
main
的位置在哪里，所以我把它放在了右边

颜色用于可视化，我缩小了
主体内容的宽度，以查看其后面的
主内容


.main{
最大宽度：80%；
保证金：0自动；
背景色：红色；
}
.正文内容{
背景颜色：蓝色；
保证金：0自动；
宽度：50%；
填充：15px；
边框：1px纯灰；
高度：100px；
文本对齐：居中；
}

全部加上
全部加上
全部加上
全部加上
此实例中的正文内容是容器。。阀体内的任何部件都将按照规定进行弯曲

.body-content{    
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column
}

.blocka {
    flex:1
}

margin:0自动不适用于
浮动：左。谢谢你。这一个工作得很好，唯一的问题是blocka并没有将它们自己垂直限制在主容器中。类主体内容的高度应增加，以便在断块时始终包含块A。有可能吗？谢谢主干道也应该在中心@Swellar；我们的css工作只是我希望身体内容在断点处增加高度，以适应blocka@Swellar:我删除了左边的
边距
，并添加了
边距：0自动
，以使
主
居中。我还减小了
最大宽度
，以便您可以看到主管道确实处于中心位置没有问题。请在我的答案上打勾，以便其他人能快速找到答案。。享受flexbox带来的乐趣