使用CSS使用Sub Elements布局div的响应网格

Question

我正在尝试找出在html和CSS中进行以下设计的最佳方法

上面的图片显示了该页面，其中有一个“ Containing Div”，其高度是固定的（但实际高度取决于媒体查询的不同）。

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

1. Containing Div设置为页面的整个宽度，但高度由CSS确定
2. 居中的Div垂直和水平居中
3. Sub Div水平对齐，但仅在“居中div”下方固定一定的距离
4. 不使用任何绝对定位

我已经尝试使用Flexbox将“居中的div”居中放置，但是效果很好，但是“ sub div”无法正确放置自己的位置

.containing-div {
  min-height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;  
}

.centered-div {

}

.sub-div {

}

  <div class="containing-div">
    <div class="centered-div">
        <span>Centered Vertically and Horizontally</span>
    </div>
    <div class="sub-div"> 
        <span>Sub Div</span>
    </div>
  </div>

Answer 1

当您在寻找boostrap类时，伪指令也可能有用。

基本上，这个想法是在细分和一个看不见的伪元素之间共享居中元素留下的空间：

示例：

.containing-div {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* show middle & center */
  background: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.25) 50%)
}

.centered-div {}

.containing-div:before {
  content: ''
}

.containing-div:before,
.sub-div {
  flex: 1;
}
/* extra */
body {
margin:0;
}
div div,
 :before {
  padding: 1em
}

<div class="containing-div">
  <div class="centered-div">
    <span>Centered Vertically and Horizontally</span>
  </div>
  <div class="sub-div">
    <span>Sub Div</span>
  </div>
</div>