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

由于圆形在矩形内，因此它的位置是相对于矩形的。这意味着您需要将 circlebottom属性设置为圆半径的一半：

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 元素创建了一个圆圈，而不是您提供的图像（您可以删除它）。