Html 使用CSS为具有子元素的div布局响应网格

我正试图找出用html和CSS设计以下内容的最佳方法

上图显示了该页面，其中有一个“Containing Div”，其高度固定，但具体高度因媒体查询而异

我的问题是如何实现这种布局在哪里

包含的Div设置为页面的全宽，但高度由css确定 居中Div在垂直和水平方向居中 子Div水平对齐，但仅位于“居中Div”下方一定数量的位置 不使用任何绝对定位 我曾尝试使用Flexbox将“居中div”居中，效果很好，但“sub div”自身定位不正确

.包含div{ 最小高度：750px； 显示器：flex； 对齐项目：居中； 证明内容：中心； } .中心分区{ } ·分区{ } 垂直和水平居中 小队

---

在寻找boostrap类时，伪类也可能有用

基本上，这个想法是在subdiv和一个看不见的伪元素之间共享居中元素左侧的空间：

例如：

.包含div{ 高度：100vh； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 证明内容：中心； /*显示中间和中间*/ 背景：线性梯度0度，透明50%，rgba0，0，0.25 50%，线性梯度90度，透明50%，rgba0，0，0.25 50% } .centered div{} .包含div:before{ 内容： } .包含div:before， ·分区{ 弹性：1； } /*额外的*/ 身体{ 保证金：0； } 分区， ：之前{ 填充：1米 } 垂直和水平居中 小队

---

请添加您已经拥有的相关代码tried@SuperDJ我添加了一个代码片段，但不确定我使用的方法是否适合我试图实现的目标。我在这里没有看到任何引导类。本机类可以处理这个布局引导4+flex类Yep ok fair point@G-Cyr，我将为这个问题划出引导要求