保持绝对div与百分比父div对齐

Question

我正在使用一个div，并在div里面另一个需要坚持父div的div。

但是当我重新缩放浏览器时，它并没有坚持到正确的位置。我是否需要使用javascript执行此操作？

HTML

<div class="block">
    White div block
    <div class="block-content">
        Green div
    </div>
</div>

CSS

.block {
position: relative;
width: 100%;
height: 100%;
background-image: url('voorgrond.png');
background-repeat: no-repeat;
background-position: 70% center; /* positie van de screen */

}

.block-content {
position: absolute;
left: 65%;
top: 42%;
width: 200px;
height: 200px;
}

绿点应该贴在白色方块内。

Answer 1

LIVE DEMO

<div class="block">
    <div class="block-content"></div>
</div>

.block {
  position: absolute;
  background:#fff;
  border-radius:10%;
  width: 200px;
  height: 200px;  
  padding:50px;
  left: 65%;
  top: 50%;
  margin-top: -150px;
  margin-left: -150px;
}

.block-content {
  position: absolute;
  background: #00A652;
  border-radius:50%;
  width: 200px;
  height: 200px;
}

@media (max-width: 600px) {
  .block{
      left: 50%;
  }
}

Answer 2

假设你的目标是图像我做了这个小提琴，模仿你似乎需要的东西。

FIDDLE

HTML：

<div class="block">
    <div class="block-content">
        Hierzo!
    </div>
</div>

CSS：

.block{
    position:relative;
    margin: 300px 0 0 50%;
    width:30%;
    height:80px;
    background:grey;
    border-radius:10px;
}

.block-content{
    width:50px;
    height:50px;
    background:green;
    border-radius:50px;
    position:absolute;
    top:50%;
    left:50%;
    margin: -25px 0 0 -25px;
}

希望这有帮助！

编辑已将响应宽度添加到.block