html - 响应式地将 50% 的圆圈对齐到矩形的底部中心？

Question

我有一个 div 填充了所有的宽度和一定的高度，然后我有一个较小的圆圈，它需要一半在这个 div 的底部/中心，一半在它后面。

一切正常，直到我获得更高的高度或尝试缩放它，然后圆将垂直移动并且不再是 50/50。此外，缩放页面会使圆圈从顶部而非中间展开。

jsFiddle

    <div id="rectangle">
        <img id="circle" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
    </div>

CSS:

body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: #E5E5E5;
}
#circle {
    position: absolute;
    top: 86%;
    left: 0;
    right: 0;
    width: 100px;
    margin-right: auto;
    margin-left: auto;
}

Answer 1

由于圆在矩形内部，所以它的位置是相对于矩形的。这意味着您需要将 circle bottom 属性设置为圆半径的一半:

body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: #E5E5E5;
}
#circle {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    margin-right: auto;
    margin-left: auto;
    background: none #000;
    border-radius: 50%;
}

<div id="rectangle">
    <div id="circle"></div>
</div>

我使用 html 元素创建了一个圆圈，而不是您提供的图像(您可以删除它)。