HTML CSS FLEX发行版，divs为'；t正确定心

基本上，学徒容器需要在左边，然后onClick之后打开的div需要居中（图1中的黄色点），我注意到它在不同的显示器尺寸上看起来不同

这两张照片是我迄今为止的进步，我在一些容器上画了点，希望能对你们有所帮助

我希望一切都有意义

以下是HTML：

.body2{
文本对齐：居中；
显示器：flex；
弯曲方向：行；
对齐项目：拉伸；
边框：1px点红色；
}
.body3{
填充物：5px；
文本对齐：居中；
显示器：flex；
/*弯曲方向：行*/
/*对齐项目：居中*/
边框：2个点橙色；
}
.车身柔性起步{
文本对齐：居中；
证明内容：中心；
显示器：flex；
自我证明：灵活启动；
宽度：400px；
/*弯曲方向：行*/
/*柔性流：行换行*/
/*证明内容：周围的空间*/
/*调整项目：灵活启动*/
/*边框：1px点绿色*/
}
.专栏1{
显示器：flex；
弯曲方向：立柱；
填充物：5px；
边框：1px点黄色；
}

学徒
1 - 75
垫子
数量
怪尘
150倍
灵魂之尘
90倍
视觉尘埃
170x
梦尘
300倍


学徒
1 - 75
垫子
数量
怪尘
150倍
灵魂之尘
90倍
视觉尘埃
170x
A
B

将

div class=“body3”>

嵌套在新的

div

中，并添加以下内容：

{display:flex；
证明内容：中心；
文本对齐：居中；
宽度：100%；}

检查这个

.body2{
文本对齐：居中；
显示器：flex；
弯曲方向：行；
对齐项目：拉伸；
边框：1px点红色；
}
.body3{
填充物：5px；
文本对齐：居中；
显示器：flex；
/*弯曲方向：行*/
/*对齐项目：居中*/
边框：2个点橙色；
}
.新-分区{
显示器：flex；
证明内容：中心；
文本对齐：居中；
宽度：100%；
}
.车身柔性起步{
文本对齐：居中；
证明内容：中心；
显示器：flex；
自我证明：灵活启动；
宽度：400px；
/*弯曲方向：行*/
/*柔性流：行换行*/
/*证明内容：周围的空间*/
/*调整项目：灵活启动*/
/*边框：1px点绿色*/
}
.专栏1{
显示器：flex；
弯曲方向：立柱；
填充物：5px；
边框：1px点黄色；
}

学徒
1 - 75
垫子
数量
怪尘
150倍
灵魂之尘
90倍
视觉尘埃
170x
梦尘
300倍


学徒
1 - 75
垫子
数量
怪尘
150倍
灵魂之尘
90倍
视觉尘埃
170x
A
B

我认为如果使用一些虚拟内容（简化示例），这将更容易。它会更容易阅读。此外，你应该检查支持<代码>证明自己\代码> @黄蜂嘿谢谢你的回应，你会建议拿出大量的信息，只是试着让盒子来直观地看到？你想让<代码> Ab/COD>容器始终集中在页面的中间吗？@krondog@krondog是的，信息不是问题，它只是增加了混乱。你只需要发布实际的问题，整个按钮按下甚至没有发挥作用，因为我们只关心整个事情的布局，当所有的容器都显示出来。你可以只需要几个有颜色的盒子，描述一下你尝试了什么，你想实现什么