css：如何将DOM的位置粘贴到另一个在响应式设计中具有绝对位置的DOM？

Question

HTML：

<div class='parent'>
  <div class="a"></div>
  <div class="b"></div>
</div>

的CSS：

.parent{
  width : 50vh;
  height : 50vh;
  position : relative; 

} 
.b{
   top: 15vh;
   position: absolute;
   margin-left: 15vh;
}

问题是，我想将DOM .a放在.b的顶部中心。我该怎么写css规则？ 由于它使用vh来定义.parent和.b的大小，而.a具有固定的大小。如果我使用abosulte位置并给a一个固定的top和left值，它就不会转到我想要的位置。 它必须是纯CSS（或scss）。感谢。

Answer 1

你没有正确关闭div。我为父母使用flexbox。希望这会有所帮助。

＆＃13;

＆＃13;

.parent {
  width: 50vh;
  height: 50vh;
  position: relative;
  border: solid thin red;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.a,
.b {
  top: 30vh;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.a {
  border: solid thin green;
  width: 20%;
}

.b {
  border: solid thin blue;
  width: 90%;
}

＆＃13;

<div class='parent'>
  <div class="a">a
  </div>
  <div class="b">b
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;