将div放在两个div之间的空间中，一个在另一个内

Question

我有div-1，其中包含div-2和一个标题。 div-2的大小各不相同。我希望HEADING正确地位于两个div的顶部之间，如图所示，具有不同的div-2大小。很想拥有纯粹的css或scss。我已将div2集中在div1中     top: 50%; left: 50% transform = translate (-50%, -50%)

但我无法将标题放在中心位置。在两个＆＃39;之间＆＃39;

我不知道div-2的大小。它保持不变，我希望标题位于中间，不像this中已知元素的大小。

Answer 1

最好使用flexbox，div1放入display: flex; flex-direction: column; align-items: center; justify-content: center;

标题可以位于div2内的绝对位置（位置：相对），只需将顶部值设置为-100px（示例）。

编辑：但是如果您需要标题恰好位于中间，则需要使用javascript来计算这些元素的高度...（div1 - div2）/ 2 =顶部空间。那么顶部空间 - 字体大小/ 2是标题的顶部...希望你得到它