Html 如何将一个div放在另一个div的中心（大div中只有一个较小的矩形）？

我试着把所有的“盒子”放在盒子的中心。当我改变窗口大小时，它也应该是一种维护措施。我还试图在紫色盒子里平均分配黄色盒子。 我尝试使用不同的CSS对齐方式，但未能获得可靠的结构。 我特别想要紫色的盒子，黄色的盒子在绿色的盒子中间。

谢谢你的提示

.wrapper{
显示：网格；
边框样式：实心；
边框颜色：红色；
网格模板列：重复（2，1fr）；
网格模板行：重复（2，1fr）；
宽度：99%；
左缘：0.25%；
高度：98vh；
}
.建筑场地{
显示：网格；
边框：1px实心；
边框颜色：紫色；
网格模板列：重复（10，1fr）；
网格模板行：重复（3，1fr）；
宽度：80%；
身高：80%；
}
.基本项目{
边框：1px实心橙色；
宽度：100%；
身高：100%；
}
1.建筑面积{
边框：1px纯绿色；
利润率：10px；
调整内容：周围的空间
}
.二{
边框：1px纯蓝色；
利润率：10px；
填充：10px；
}
.三{
边框：1px纯蓝色；
利润率：10px；
填充：10px；
}
.4{
边框：1px纯蓝色；
利润率：10px；
填充：10px；
}

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
两个
三
四

将flexbox添加到

designarea

水平居中，并

将self:center对齐到
.buildground


.wrapper{
显示：网格；
边框样式：实心；
边框颜色：红色；
网格模板列：重复（2，1fr）；
网格模板行：重复（2，1fr）；
宽度：99%；
左缘：0.25%；
高度：98vh；
}
.建筑场地{
显示：网格；
边框：1px实心；
边框颜色：紫色；
网格模板列：重复（10，1fr）；
网格模板行：重复（3，1fr）；
宽度：80%；
身高：80%；
自对准：居中；
/*这个*/
}
.基本项目{
边框：1px实心橙色；
}
1.建筑面积{
显示器：flex；
/*这个*/
边框：1px纯绿色；
利润率：10px；
证明内容：周围的空间；
}
.二{
边框：1px纯蓝色；
利润率：10px；
填充：10px；
}
.三{
边框：1px纯蓝色；
利润率：10px；
填充：10px；
}
.4{
边框：1px纯蓝色；
利润率：10px；
填充：10px；
}

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
两个
三
四
对不起，我编辑了这篇文章。我特别想要紫色的盒子，黄色的盒子在绿色的盒子中间。试试看，非常强大，非常容易使用。不推荐使用网格吗？